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

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

编辑 - 添加代码以显示如何验证然后提交。另外，我添加了一个类型=＆＃34;提交＆＃34;到按钮，因为验证代码自动挂钩到表单提交事件。

$(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，因此仅在表单验证时运行。

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

使用Jquery验证我的表单

2 个答案: