如何在jQuery中提交之前检查验证表单?

时间:2017-08-17 13:36:47

标签: javascript validation

我使用JQuery form validation。但在提交之前我需要验证表格 点击标记<a>

例如:

<form action="/registration" method="POST">
 <p>
    User name (4 characters minimum, only alphanumeric characters):
    <input data-validation="length alphanumeric" data-validation-length="min4">
  </p>
  <p>
    Year (yyyy-mm-dd):
    <input data-validation="date" data-validation-format="yyyy-mm-dd">
  </p>
  <p>
    Website:
    <input data-validation="url">
  </p>
  <p>
    <a href="">Check before registration</a>
    <input type="submit" style="display: none;">
  </p>
</form>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script>
   $.validate({
      lang: 'es'
   });
</script>

如果表格不是任何错误显示提交按钮。

如何在jQuery中提交之前检查验证表单?

1 个答案:

答案 0 :(得分:1)

推荐:只需要提交按钮,然后将验证规则放在html中,并调用库提供的$ .validate()。这样,库可以更稳定地工作。

但是如果您想以编程方式执行此操作,并且仅在验证按钮后显示提交按钮,这可能会有所帮助,http://www.formvalidator.net/#advanced_programmatically 用此代码触发验证

// This will keep using use default options
// and validate on submit or if user presses enter
$.validate(); 


// This will validate on clicking verify button and show a submit button
$("#verify-button").on("click", function(e){
    if($("#myform").isValid()){
         $("#submit-button").show();
    }
});

小提琴片https://jsfiddle.net/cad2xjb0/2/