validate a form before it get submitted

Question

I have a form in my jsp page. I submit the form using Ajax. I do not use a submit type button, I use a button type button to call a javascript function which includes ajax . I call that javascript function on above mentioned button click. Now I need to validate my form. For that I use jquery form validation from here. They use a function like this to validate form.

$(function(){

                 $("#detailForm").validate({
                     rules:{
                         regdate:{
                             required:true
                         },
                         agreementNo:{
                             required:true
                         },
                         customerName:{
                             required:true
                         },
                         customerAddress:{
                             required:true
                         },
                         customerNic:{
                             required:true
                         },
                         telephoneNo:{
                             required:true
                         },
                         jobDescription:{
                             required:true
                         }

                     }
                 });

             });

Now I cannot figure out how do I validate the form before I submit it. Above function cannot be called in a way like this.

$("#btn1").on('click',function(){


                     $("#detailForm").validate({

                         rules:{
                             regdate:{
                                 required:true
                             },
                             agreementNo:{
                                 required:true
                             },
                             customerName:{
                                 required:true
                             },
                             customerAddress:{
                                 required:true
                             },
                             customerNic:{
                                 required:true
                             },
                             telephoneNo:{
                                 required:true
                             },
                             jobDescription:{
                                 required:true
                             }

                         }
                     });


             });

they call validate function on submit type button click.

So how can I do this. I need to validate the function and call the javascript which includes ajax on my button type button click. help me in this case. Thank you!

Answer 1

You need to define the rules as you are upon load. Then upon button click, you can use the valid() method to check the forms' state.

$("#btn1").on('click',function(){
    if ($("#detailForm").valid()) {
        // form is fine, send data as needed
    }
    else {
        // form was not valid. Messages should have been shown.
    }
});

Answer 2

You need to use the result of your validate like so:

$("#btn1").on('click',function(){
    var validator = $("#detailForm").validate({
     rules:{
         regdate:{
             required:true
         },
         agreementNo:{
             required:true
         },
         customerName:{
             required:true
         },
         customerAddress:{
             required:true
         },
         customerNic:{
             required:true
         },
         telephoneNo:{
             required:true
         },
         jobDescription:{
             required:true
         }
     }
    });

    if (validator.form())
    {
        //form is valid
        return true;
    }
    else
    {
        //can also display error messages using validator.showErrors(errors)
        return false;
    }
});