如何使用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); 
     }); 
    } 
});