jquery click function should run after validator is done

Question

First, I have a script for validation, its working fine and if I added a script for the alert box, validation function is not working. What I need is first, the validator should execute and after that, the alert for the button should execute.

<script>
    jQuery.validator.setDefaults({
        debug: true,
        success: "valid"
    });

    $( "#ContactForm1" ).validate({
        rules: {
            fname: "required",
            lname: "required",
            phone: "required",
            email: {
                required: true,
                email: true
            },
            message: "required",
        }
    });
</script>

<script>
    $(document).ready(function(){
        $("#btn").click(function(){
            alert("Hello World!");
        });
    });
</script>

Answer 1

Use submitHandler :

$("#ContactForm1").validate({
  rules: {
    fname: "required",
    lname: "required",
    phone: "required",
    email: {
      required: true,
      email: true
    },
    message: "required",
  },
  submitHandler: function() {
    alert("Hello World!");
  }
});

Answer 2

Here is working example. To check if your form is valid simply use: if ($( "#ContactForm1" ).valid())

 jQuery.validator.setDefaults({ debug: true, success: "valid" }); $( "#ContactForm1" ).validate({ rules: { fname: "required", lname: "required", phone: "required", email: { required: true, email: true }, message: "required", }, submitHandler: function() { //$('#btn').click(); }} ); src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"> $(document).ready(function(){ $("#btn").click(function(){ if ($( "#ContactForm1" ).valid()) { alert('runs only if form is valid'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script> <form id="ContactForm1" method="get" action=""> <fieldset> <legend>Please provide your name, email address (won't be published) and a comment</legend> <p> <label for="fname">Name (required, at least 2 characters)</label> <input id="cname" name="fname" minlength="2" type="text" required> </p> <p> <label for="email">E-Mail (required)</label> <input id="email" type="email" name="email" required> </p> <p> <label for="phone">Phone (optional)</label> <input id="phone" type="phone" name="phone"> </p> <p> <label for="phone">URL (optional)</label> <input id="phone" type="phone" name="phone"> </p> <p> <label for="message">Your message (required)</label> <textarea id="message" name="message" required></textarea> </p> <p> <input class="submit" type="submit" value="Submit"> </p> <p> <button type="button" id="btn">Your button</button> </p> </fieldset> </form>