如何使用JQuery和Ajaxvalidation表单字段并将表单数据发布到服务器？

我正在尝试validation表单字段，如名称（不能为空），Email_id（必须有效），移动（必须有效）。 填写完所有信息后，我必须将此信息发送到服务器，并将响应重定向到不同的页面。 没有什么工作 ，

我的form.html

 
 
 Name:* 
  
 
 
 Email:* 
  
 
 
 Mobile:* 
  
 
 
  
  
 
 
  

用于validation表单和发送数据的脚本

   $(document).ready(function(){ $("#scheduleLaterForm").validate({ rules: { userName: "required", email: { required: true, email: true }, userContactNumber: "required" }, messages: { userName: "Please enter your Name", userContactNumber: "Please enter your Mobile number", email: "Please enter a valid email address", }, submitHandler: function(form) { // get values from textboxs var uName = $('#userName').val(); var mailId = $('#addressemailId').val(); var mobNum = $('#userContactNumber').val(); $.ajax({ url:"http://localhost/services/bookService4Homes.php", type:"GET", dataType:"json", data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum }, //type: should be same in server code, otherwise code will not run ContentType:"application/json", success: function(response){ alert("success"); //alert(JSON.stringify(response)); }, error: function(err){ alert("fail"); //alert(JSON.stringify(err)); } }); return false; // block regular submit } }); });  

PHP代码

Answer 1

• 您不需要外部click处理程序，因为插件会自动捕获click （ type="submit" ）并阻止提交。

• 您需要在form中type="submit"的input或button ，否则根本不会触发插件。

• 在submitHandler .validate()方法的submitHandler中有form.submit时，不能有外部.ajax函数。 这意味着当您的单击处理程序尝试使用ajax ，插件正在尝试提交表单。 他们都无法同时工作。 根据文档，任何ajax属于submitHandler ，它是“经过validation后通过Ajax提交表单的正确位置” 。

• 您不需要检查表单有效性，因为当您使用内置的submitHandler ，这也是自动完成的。

• jQuery4U代码只不过是复杂的垃圾; 一切都可以大大简化。 除了给寻求指导的人带来更多混淆之外，它没有用处。 它来自Sam Deering的一个流行但很难解释的在线演示/教程，它与许多地方相连。

   $(document).ready(function(){ $("#register-form").validate({ rules: { userName: "required", email: { required: true, email: true }, userContactNumber: "required" }, messages: { userName: "Please enter your Name", userContactNumber: "Please enter your Mobile number", email: "Please enter a valid email address", }, submitHandler: function(form) { // get values from textboxs var uName = $('#userName').val(); var mailId = $('#addressemailId').val(); var mobNum = $('#userContactNumber').val(); $.ajax({ url:"http://192.168.1.11/services/bookService4Homes.php", type:"POST", dataType:"json", data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum }, //type: should be same in server code, otherwise code will not run ContentType:"application/json", success: function(response){ //alert(JSON.stringify(response)); }, error: function(err){ //alert(JSON.stringify(err)); } }); return false; // block regular submit } }); }); 

演示： http ： //jsfiddle.net/mh6cvf2u/