How to trigger validation without using a submit button

28,944

You have to call validate with no arguments to trigger the validate function, like this:

$("#applicant-form").validate();
Share:
28,944
Ken
Author by

Ken

Updated on July 09, 2022

Comments

  • Ken
    Ken almost 2 years

    I am using the jQuery Validation plugin and trying to trigger the validation/submit with an alternate button. I would like to create a jquery function that will change the css, and then run the validate function. I have looked at previously answered questions but have not found any that address this issue with regards to the Validation plugin and and the submitHandler function. Any suggestions?

    UPDATE TO QUESTION: The button that I would like to use is placed outside of the form. What is the best way to submit and validate a form with a button located outside of that form?

    Here is the code:

    $("#edit-button").click(function(event) {
    
    $('#postAccordion2').css('padding-bottom', '0px');
    $('#edit-button').css('display','none');
    $("#applicant-form").validate({
        submitHandler: function(form) {
                $(form).ajaxSubmit({                  
                    type: "POST",
                    data: {
                        "firstName" : $('#firstName').val(),
                        "lastName" : $('#lastName').val()
                        },
                    dataType: 'json',
                    url: './includes/ajaxtest.php',
                    error: function() {alert("doh!");},
                    success: function() {alert("yippee!");},
    
        }    
    
      });
    
    return false;   
       },
            errorPlacement: function(error,element) {
                            return true;
                    },
            rules: {
                "firstName": {
                    required: true,
                    minlength: 1
                    },  
                "lastName": {
                    required: true
                    }
            }
    
    
    });
       });