使用Jquery验证我的表单 [英] Validating my form with Jquery

问题描述

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

我想要做的只是在'bill_cost'字段完成后才提交表格。没有验证码的表单工作。我正在尝试使用 jquery live表单验证插件，但由于某种原因，它'不工作。请谁能告诉我什么是错误的/我应该在哪里放置验证代码？

表格

 < form class =form -inlineaction =id =myformform =method =post> 
 
 <！ - 文字输入 - > 
< div class =form-group> 
 < div class =col-md-8> 
< input id =bill_costname =bill_costtype =textplaceholder =Bill Costclass =form-control input-lgrequired> 
 
< / div> 
< / div> 
 
 
<！ -  Button  - > 
< div class =form-group> 
 < div class =col-md-4> 
< button id =submitButtonIdname =submit1class =btn btn-primary btn-xl>提交< / button> 
< / div> 
< / div> 
< / form> 
  

Jquery

 < script> 
 $（document）.ready（function（）{
 $（＃message）。hide（）; 
 $（＃submitButtonId）。 （e）{
 e.preventDefault（）; 
 
 var formdata = $（this.form）.serialize（）; 
 $ .post（'../ php_includes / insert.php'，formdata，
函数（data）{
 $（＃message）。html（data）; 
 $（＃message）。 
 $（＃message）。fadeOut（500）; 
 
 //验证表单
 jQuery（function（）{
 jQuery（＃bill_cost ）.validate（{
 expression：if（VAL）return true; else return false;，
 message：请输入必填字段
}）; 
 
 jQuery（'。myform'）。validated（function（）{
 
}）; 
}）; 
 //验证结束
 
 
 //重置表格
 $（'＃myform'）[0] .reset（）; 
}）; 
返回false; 
 
}）; 
}）; 
< / script> 
  

解决方案

没有什么能够阻止您的表单发布。编辑 - 添加代码以显示如何验证并提交。另外，我在按钮中添加了type =submit，因为验证代码会自动挂钩到表单提交事件中。

 <$ c $ 
 $（＃message）。hide（）; 
 
 //定义您的验证规则
 $（ #bill_cost）。validate（{
 expression：if（！isNaN（VAL）&& VAL）return true; else return false;，
 message：Should be a number 
}）; 
 
 //定义整个表单验证时发生的事件（在表单提交时）
 $（'＃myform'）。validated（function（ ）{
 var formdata = $（'＃myform'）。serialize（）; 
 
 //发布表单数据
 $ .post（'＃'，formdata，function（数据）{
 //处理后回应
 $（＃message）。html（data）; 
 $（＃message）。fadeIn（500）; 
 $（＃message）。fadeOut（500）; 
}）; 
 
 //重置表单
 $（'＃myform'）[0] .reset（） ; 
}）; 
 
}）; 
  

I'm having a bad time trying to figure out how to validate a form that I am submitting with jquery's post function.

All I want to do is to only submit the form if the 'bill_cost' field has been completed. The form works without the validation code. I am trying to use the jquery live form validation plugin but for some reason its' not working. Please can anyone tell me what's wrong / where I should place the validation code? Thanks.

The form

     <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>

The 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>

解决方案

There is nothing preventing your form post. Move your post code to your validated function.

Edit - Adding code to show how to validate and then submit. Also, I added a type="submit" to the button, because the validation code is auto-hooking into the form submission event.

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

});

这篇关于使用Jquery验证我的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！