如何使用jQuery驗證插件驗證表單？

Question

我有一個表單，提交數據到數據庫與Ajax。我想用jQuery validation來驗證表單域，但是我根本無法完成它。這些表單似乎忽略了驗證碼。誰能告訴我我做錯了什麼？非常感謝。

jQuery的

$(document).ready(function() { 
    $("#message").hide(); 


    $("#edit_profile").validate({ //Validate 

     //validation rules go here 
     rules: { 
      user_name: { 
       required: true 
      }, 
      user_email: { 
       required: true, 
      } 
     }, 
    messages: { 
      user_name: "error.", 
      user_email: "error." 
     }, 
     //End Validation 

    $("#submit").on("click", function(e) { 

      e.preventDefault(); 

    var formdata = $(this.form).serialize(); 
      $.post('update_profile.php', formdata, 
       function(data) { 
        $("#message").html(data); 
        $("#message").fadeIn(500); 
        $("#message").fadeOut(500); 
       }); 
     }); 

     return false; 
    }); 
}); 

表單

<!--FORM STARTS HERE---> 

<div class="form-group"> 
<form class="" action="" id="edit_profile" method="post"> 
       <label> 
       Name 
       </label> 
       <input id="user_name" name="user_name" type="text" placeholder="<?php echo $user_name ; ?>" value="<?php echo $user_name ; ?>" class="form-control input-md" 
       > 
      </div> 
      <div class="form-group"> 
       <label> 
       Email 
       </label> 
       <input id="user_email" name="user_email" type="text" placeholder="<?php echo $user_email; ?>" value="<?php echo $user_email; ?>" class="form-control input-md" 
       required=""> 
      </div> 
      <button type="submit" class="btn btn-small btn-green pull-right" id="submit"> 

       Save 
      </button> 
    </form> 
    <!--FORM ENDS HERE---> 
<div id="message"></div> 

Answer 1

因爲驗證自動調用的形式提交。
在這種情況下，沒有提交表格。

將ajax調用放在submitHandler中。

或使用

if (!$("#edit_profile").valid()) { 
return false; 
} 

前

e.preventDefault(); 

Answer 2

我覺得你應該把提交的代碼到你傳遞給.validate()對象的submitHandler財產。看一看文檔：

https://jqueryvalidation.org/validate/

您發佈的代碼是語法不正確，因爲你把$().on('click')東西傳遞給.validate()對象內部。

Answer 3

我會在看到代碼中的一些缺陷後寫出正確的答案。

使用submitHandler屬性傳遞一個將在表單有效時執行的函數。

該函數帶有兩個參數form元素和event實例，您可以將它用於您的AJAX調用。

$("#edit_profile").validate({ 
    rules: { 
     user_name: { 
      required: true 
     }, 
     user_email: { 
      required: true, 
     } 
    }, 
    messages: { 
     user_name: "error.", 
     user_email: "error." 
    }, 
    submitHandler: function (form, e) { 
     e.preventDefault(); 
     $.post('update_profile.php', $(form).serialize(), function(data) { 
      $("#message").html(data); 
      $("#message").fadeIn(500); 
      $("#message").fadeOut(500); 
     }); 
    } 
});