jquery - 使用 Jquery 验证我的表单

Question

我在尝试弄清楚如何验证我使用 jquery 的 post 函数提交的表单时遇到了困难。

我想做的就是仅在“bill_cost”字段已填写时提交表单。该表单无需验证代码即可工作。我正在尝试使用 jquery live form validation plugin但由于某种原因它不起作用。请问谁能告诉我出了什么问题/我应该将验证码放在哪里？谢谢。

表格

     <form class="form-inline" action="" id="myform" form="" method="post">

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="bill_cost"></label>  
  <div class="col-md-8">
  <input id="bill_cost" name="bill_cost" type="text" placeholder="Bill Cost" class="form-control input-lg" required>

  </div>
</div>


<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit1"></label>
  <div class="col-md-4">
    <button id="submitButtonId" name="submit1" class="btn btn-primary btn-xl">Submit</button>
  </div>
</div>
</form>

Jquery

   <script>
$(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;

});
});
</script>

Answer 1

没有什么可以阻止您的表单发布。将您的邮政编码移至经过验证的函数。

编辑 - 添加代码以显示如何验证然后提交。另外，我向按钮添加了 type="submit"，因为验证代码会自动 Hook 到表单提交事件。

$(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(); 
  });

});