Submitting form after validation

[kdidymus]

I'm really sorry - this is the first time I've used JQuery to validate a form and I'm a bit stuck with what to do next.

So, I've written the HTML. Your (wonderful, thank you!) code validates the fields and displays "All of the fields were successfully validated!" across the top in a nice little DIV. But the form isn't submitted according to the ACTION and METHOD parameters I set. It validates and then does nothing else.

What command do I need to use to get the form to submit to the handler after validation?

Thanks so very much in advance.

[rickharrison]

Can you paste the code that you are using on your site?

[kdidymus]

Rick - it would be my pleasure. Thanks for getting back to me so quickly.

Here it is...

var validator = new FormValidator('register', [{
name: 'title',
display: 'TITLE',
rules: 'required'
}, {
name: 'forename',
display: 'FORENAME',
rules: 'required'
}, {
name: 'surname',
display: 'SURNAME',
rules: 'required'
}, {
name: 'age',
display: 'AGE',
rules: 'required'
}, {
name: 'email1',
display: 'E-MAIL ADDRESS',
rules: 'required|valid_email'
}, {
name: 'email2',
display: 'CONFIRM E-MAIL ADDRESS',
rules: 'required|valid_email|matches[email1]'
}, {
name: 'billpostcode',
display: 'POSTCODE (BILLING)',
rules: 'required|min_length[5]|max_length[8]'
}, {
name: 'billaddress1',
display: 'ADDRESS (BILLING)',
rules: 'required'
}, {
name: 'billtown',
display: 'TOWN (BILLING)',
rules: 'required'
}, {
name: 'billcounty',
display: 'COUNTY (BILLING)',
rules: 'required'
}, {
name: 'shipforename',
display: 'FORENAME (SHIPPING)',
rules: 'required'
}, {
name: 'shipsurname',
display: 'SURNAME (SHIPPING)',
rules: 'required'
}, {
name: 'shippostcode',
display: 'POSTCODE (SHIPPING)',
rules: 'required|min_length[5]|max_length[8]'
}, {
name: 'shipaddress1',
display: 'ADDRESS (SHIPPING)',
rules: 'required'
}, {
name: 'shiptown',
display: 'TOWN (SHIPPING)',
rules: 'required'
}, {
name: 'shipcounty',
display: 'COUNTY (SHIPPING)',
rules: 'required'
}], function(errors, evt) {

var SELECTOR_ERRORS = $('.error_box'),
    SELECTOR_SUCCESS = $('.success_box');

if (errors.length > 0) {
    SELECTOR_ERRORS.empty();

    for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
        SELECTOR_ERRORS.append(errors[i].message + '<br />');
    }

    SELECTOR_SUCCESS.css({ display: 'none' });
    SELECTOR_ERRORS.fadeIn(200);
} else {
    SELECTOR_ERRORS.css({ display: 'none' });
    SELECTOR_SUCCESS.fadeIn(200);
}

if (evt && evt.preventDefault) {
    evt.preventDefault();
} else if (event) {
    event.returnValue = false;
}

});

I just can't figure out how to get the form to submit (to my form_process.php) after successfully validating. At the moment the form simply confirms that all fields have validated. What I need, instead of the nice green box with the "all fields have successfully validated", is for the form to submit using the ACTION and METHOD parameters.

I'm sorry Rick. I'm such a novice with JQuery. But I'm learning!

[rickharrison]

Yes, the callback you have there is designed to prevent form submission. Specifically this section:

if (evt && evt.preventDefault) {
    evt.preventDefault();
} else if (event) {
    event.returnValue = false;
}

[kdidymus]

So if I remove that section of code, would the form submit automatically once it passes validation? I'm truly sorry for being such a "numpty" when it comes to JQuery. If it won't automatically submit, what call would I use there?

[rickharrison]

Yes, it will submit. The code you have there is actively preventing the form submission.

[kdidymus]

You're a legend. Works perfectly now. Thank you.

[rickharrison]

Glad I could help!