Question

This is my first post and will appreciate if I can get the solution from you asap. Thanks in advance. 🙂

I am using JQuery validation plugin in my application. I have a signup form and uses .submit() method to submit the form. But when I try to submit the same form from Mozilla or IE,it submits the form but doesn’t go through the validation. So in short w/o validation, I am getting garbage data in y DB.

I am attaching my .JS file and please have to look and let me know if I am doing something wrong.

home.js

//Validation rules

    $('#signup-form').validate({

        rules: {
            'firstname':       { required:  true },
            'lastname':        { required:  true },
            'email':           { required:  true,
                                 email:     true,
                                 remote:  { url:  siteurl+'ajax/checkemail',
                                            type: 'post' }},
. 
.
.
.
messages: {
            'firstname':       { required:  'Please enter your first name' },
            'lastname':        { required:  'Please enter your last name' },
            'email':           { required:  'Please enter your email address',
                                 email:     'Your email address is invalid',
                                 remote:    'The email you chose is already in use' },

    .
    .
    .       
    errorLabelContainer: $(".fail-message")

    });.

//Click sign up OK button

            $("#signup-ok-btn").click(function(){           
              $("#signup-form").submit();
              return false;         
             });

//Signup form submit

     $('#signup-form').submit(function(){

        //If the form is invalid
        if ($('#signup-form').valid()){             
            return true;                                    
        } else {                
            //Show errors
            $('#signup-form-fail').fadeIn(300);
            return false;                   
        }

    });

I have added some snippets of my code related to submit the form. Can you please guide me if I m going wrong somewhere if there is some binding problem.

Answer 1

You should be using the submitHandler inside of your validate code.

$('#signup-form').validate({
   rules: {
     'firstname': { required: true },
     'lastname': { required: true },
     'email': {
        required: true,
        email: true,
        remote: {
           url: siteurl+'ajax/checkemail',
           type: 'post'
        }
     }
   },

   messages: {
     'firstname': { required: 'Please enter your first name' },
     'lastname': { required: 'Please enter your last name' },
     'email': {
        required: 'Please enter your email address',
        email: 'Your email address is invalid',
        remote: 'The email you chose is already in use'
     }
   },

   errorLabelContainer: $(".fail-message"),

   submitHandler: function(form) {
      ...WHAT YOU WANT TO HAPPEN WHEN THE FORM IS SUBMITTED...
      form.submit();
   }
});

You shouldn’t be attaching anything to the submit button manually; The validation plug-in handles this all for you.

Here’s the official documentation for the jQuery Validation plug-in: http://docs.jquery.com/Plugins/Validation. Tons of good information and examples there.