使用Jqueryvalidation我的表单

我正在努力弄清楚如何validation我使用jquery的post函数提交的表单。

我想要做的只是在’bill_cost’字段完成后才提交表单。 表单无需validation代码即可运行。 我试图使用jquery实时表单validation插件但由于某种原因它’不工作。 请问任何人都可以告诉我什么是错的/我应该在哪里放置validation码？ 谢谢。

表格

  
  
  
 
  
  
 Submit 
 
  

Jquery

   $(document).ready(function(){ $("#message").hide(); $("#submitButtonId").on("click",function(e){ e.preventDefault(); var formdata = $(this.form).serialize(); $.post('../php_includes/insert.php', formdata, function(data){ $("#message").html(data); $("#message").fadeIn(500); $("#message").fadeOut(500); //Validate the form jQuery(function(){ jQuery("#bill_cost").validate({ expression: "if (VAL) return true; else return false;", message: "Please enter the Required field" }); jQuery('.myform').validated(function(){ }); }); //End of validation //Reset Form $('#myform')[0].reset(); }); return false; }); });  

Answer 1

没有什么能阻止你的表格发布。 将您的邮政编码移动到经过validation的function。

编辑 – 添加代码以显示如何validation然后提交。 此外，我在按钮中添加了一个type =“submit”，因为validation代码会自动挂钩到表单提交事件中。

 $(document).ready(function(){ $("#message").hide(); //Define your validation rules. $("#bill_cost").validate({ expression: "if (!isNaN(VAL) && VAL) return true; else return false;", message: "Should be a number" }); //Define the event that will occur when the entire form is validated (on form submission) $('#myform').validated(function(){ var formdata = $('#myform').serialize(); //Post form data $.post('#', formdata, function(data){ //Process post response $("#message").html(data); $("#message").fadeIn(500); $("#message").fadeOut(500); }); //Reset Form $('#myform')[0].reset(); }); }); 

Answer 2

尝试这样的事情：这里validated事件调用$.post ，所以它只在表单validation时运行。

 jQuery(function(){ $("#submitButtonId").on("click",function(e){ e.preventDefault(); var formdata = $(this.form).serialize(); //Validate the form jQuery("#bill_cost").validate({ expression: "if (VAL) return true; else return false;", message: "Please enter the Required field" }); return false; }); jQuery('.myform').validated(function(){ $.post('../php_includes/insert.php', formdata, function(data){ $("#message").html(data); $("#message").fadeIn(500); $("#message").fadeOut(500); //Reset Form $('#myform')[0].reset(); }); }); });