Question

I have am using the jQuery validation plugin (1.8.1 from MS CDN) to validate input fields on the submit of a form. The script is 1000+ lines in all and although gives a nice approach to validating fields (yes I check with php after the fact as well) I am thinking about tossing it regardless. I have got it to a point where the script runs well.

Update – final code, working.

Code has been updated but I am still running into issues. Now, the submit function works but it never validates the fields. (I know it is reaching the fields with a simple alert() test placed after the length check:

    <script type="text/javascript">
$(function(){

  $('#page_submit').click(function() {
    $('#signupform').submit(); 
  });

  if ($("#signupform").length > 0) { 
    $("#signupform").validate({ 
        rules: {
            fname: 'required',
            lname: 'required',
            websitename: 'required',
            address: 'required',
            city: 'required',
            state: 'required',
            zip: { required: true, digits: true },
            password: 'required',
            passwordconf: 'required',
            email: { required: true, email: true }
        },
        messages: {
            fname: 'Your first name is required.',
            lname: 'Your last name is required.',
            email: { required: 'Your email address is required.',
            email: 'Please enter a valid email address.'}
        },
        submitHandler: function(form) {
            $('body').append('<div id="cboxOverlay"></div>');
            $('#cboxOverlay').show();
            form.submit();
        }
    });
  }
});
</script>

NOTE: The above code has been modified and now works. The submit() function MUST be added after the click function in this scenario because we are clicking an image and adding the submit action, not a submit button within a form.

Previously, I had action placed on the button image itself but moved up into the jquery statement to prevent obstrusive JS. When clicking the button now, the page submits automatically and never runs the validation.

Answer 1

You still have to submit the form, yes?

    submitHandler: function(form) {  
        $('body').append('<div id="cboxOverlay"></div>');
        $('#cboxOverlay').show();
        form.submit();  //*******************
    }