jquery點擊函數應該在驗證器完成後運行

Question

首先，我有一個用於驗證的腳本，它的工作正常，如果我爲警告框添加了腳本，驗證功能不起作用。我需要的是首先驗證器應該執行，然後執行該按鈕的警報。

<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

這裏工作的例子。 要檢查您的形式是有效的簡單的使用： 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>

Answer 2

使用submitHandler：

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