How to call form validator for specific form before form submit

Question

I am using form-validator.js to do validations on my webpages. I have multiple forms on my screen and I am using jquery ajax to post the form. I was calling jQuery.validate() to validate the form. But this is calling validations for all the forms in the page. But I need to do validation only to a specific form.

<form id="form1" method="POST" action="webpageurl">
    <div class="input-group">
        <span class="input-group-addon">FirstName</span>
        <div>
            <input type="text" name="firstname" class="form-control" data-validation="required" data-validation-error-msg="FirstName required">
        </div>
    </div>

    <div class="input-group">
        <span class="input-group-addon">LastName</span>
        <div>
            <input type="text" name="lastname" class="form-control" data-validation="required" data-validation-error-msg="LastName required">
        </div>
    </div>
    <input name="save_form1" value="Save Form1" title="" type="submit" class="qa-form-tall-button qa-form-tall-button-save">
</form>

<form id="form2" method="POST" action="webpageurl">
    <div class="input-group">
        <span class="input-group-addon">Address Line</span>
        <div>
            <input type="text" name="addressline" class="form-control" data-validation="required" data-validation-error-msg="Address Line required">
        </div>
    </div>

    <div class="input-group">
        <span class="input-group-addon">Address Line 2</span>
        <div>
            <input type="text" name="city" class="form-control" data-validation="required" data-validation-error-msg="City required">
        </div>
    </div>
    <input name="save_form2" value="Save Form2" title="" type="submit" class="qa-form-tall-button qa-form-tall-button-save">
</form>

Answer 1

form-validation.js has form property to specify the specific form which you want to validate. You can pass the id of that form so that, it will validate only that specific form. Once the form is validated and everything is success, then form validator will call onSuccess method. So, inside that method you can write your ajax call to submit your form to the respective server side url. Below code can help you resolve the issue.

jQuery.validate({
    form: '#form1',
    onSuccess: function() {
        submitForm1();
        return false;
    }
});

var submitForm1 = function()
{
    var $form = jQuery('#form1'), url = $form.attr('action').val();
    jQuery.post(
            url,
            {formdata: $form.serialize()},
    function(data)
    {
        var result = jQuery.parseJSON(data);
        //do more with the result
    });
}