使用 Jquery 验证我的表单答案

【问题标题】：Validating my form with Jquery使用 Jquery 验证我的表单
【发布时间】：2016-04-09 18:15:03
【问题描述】：

我很难弄清楚如何验证我使用 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>

【问题讨论】：

标签： jquery forms validation

【解决方案1】：

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

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

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

});

【讨论】：

我已经简化并仔细检查了我的表单是否有效，但我没有将邮政编码放在验证代码中的位置。任何更多的帮助都会很棒。
我为你制作了一个可以工作的 CodePen：codepen.io/nobrien/pen/YqeWYw。它提交回笔，用于测试目的。更改作品提交页面的路径。
太好了。像我希望的那样工作。谢谢。
知道为什么每次显示错误消息时代码笔中的示例都会导致输入大小变大。看不到哪里可以调整错误信息的css？
看起来像在没有边框的情况下添加边框，然后导致输入字段上的填充被删除（不知道为什么，我不是 css 神 :)）。我为codepen添加了默认边框和填充，因此在显示错误边框时它不会改变。

【解决方案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(); 
             });
    });
});

【讨论】：