Freeform Pro AJAX Validation with AJAX Submit using jQuery Form plugin

Question

I'm using the jQuery Form plugin (http://malsup.com/jquery/form/) to return an AJAX message on successful submission of a contact form. However, I also need to do AJAX validation.

My current form and script looks like this;

<div id="send1">
{exp:freeform:form
    form_name="callback"
    form:id="callback"
    return="ajax/success_callback"
    required="full_name|message"
}
    <label>Full Name</label>
    {if freeform:error:full_name}
    {freeform:field:full_name}

    <label>Message</label>
    {if freeform:error:message}
    {freeform:field:message}

    <input class="more_info" type="submit">
{/exp:freeform:form}
</div>

<div id="send2"></div>

<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/jquery.form.min.js"></script>
<script>
// prepare the form when the DOM is ready 
$(document).ready(function() { 
    // bind form using ajaxForm 
    $('#callback').ajaxForm({ 
        // target identifies the element(s) to update with the server response 
        target: '#send2', 

        // success identifies the function to invoke when the server response 
        // has been received; here we apply a fade-in effect to the new content 
        success: function() { 
            $('#send1').hide();
            $('#send2').fadeIn('slow'); 
        } 
    }); 
});
</script>

As you can see, on success I am hiding the 'send1' div and simply loading a success template into the 'send2' div.

I was wondering if anyone might be able to help on how to construct the error messaging using AJAX that will work using or alongside the jQuery Form plugin?

Thank you.

Answer 1

doubleplusgood, I think you're answer's right there in the jQuery Form documentation, plus a little research to do outside.

• the outside part is that good practice for your EE-side ajax response is to be simple -- no HTTP error codes should be used, even on error. Just return the div contents from EE that you want to show, whether you indicate success or give error messages.

• the initial examples in jQuery Form doc are too simplistic - they shouldn't be demonstrating by popping an alert. That would be a troubleshooting temporary, in real life.

• rather, you indicate where returned output goes by using the 'target' in the options object you initialize with. Its value is simply the id (#name) of the div whose contents you want to have replaced by your response html.

• then without needing any alerts, when the ajax response comes back from your EE call, it will go directly into <div #name>. Thus either your indication of success, or your error instructions will show there.

This is almost too simple, which is why the instructions may have seemed obscure. Have a look at their first demo under menu item Examples -- the ajaxForm page. It is live -- you can trigger the buttons and see the above happen, after examining the html behind the page. They also show alerts -- this could be useful for debugging, but probably not necessary, so again please don't confuse that with the real intended action.

Have a particular look at the source for <div #output1>, at the bottom of the example page, before you trigger it; and at the bottom of the browser page itself, before and after. Then you'll see the principle of the thing, in the way you've asked.

There are other variations under Examples, should you run into other needs.

jQuery Form is a nice tool, seems. Good fortune on your app.