点击事件前的 HTML5 表单验证答案

【问题标题】：HTML5 form validation before click event点击事件前的 HTML5 表单验证
【发布时间】：2016-06-23 07:06:31
【问题描述】：

我有以下表单和输入按钮：

 <form class="form-horizontal" role="form" id="category_markups_form" data-toggle="validator">
    {{#each context.category_0}}
      <div class="form-group">
        <label for="inputType" class="col-md-2 control-label" data-error="Please enter a number.">{{category_name}}</label>
        <div class="col-md-3">
            <input type="number" min="1.0" class="form-control" name="{{category_name}}" data-error="Please enter a number." required>
        </div>
      </div>
      {{/each}}
      <input id="to_subcategory_markups" type="submit" class="btn btn-success" value="Next: Subcategory Markups">
  </form>

我的输入按钮验证所有输入以确保它们有效。如果单击，我的按钮还会调用脚本以显示另一个表单：

$("#to_subcategory_markups").click(function(e) {
    e.preventDefault();
    $("#subcategory_markups").show();
});

我的问题是，如前所述，如果我单击输入提交按钮而不验证所有输入，我的其他表单将显示。确保表单验证的唯一方法是删除我输入的id 属性。但这意味着我的点击事件不会触发。有没有办法让我的表单在触发点击事件之前验证？

提前致谢！！

【问题讨论】：

标签： jquery html forms twitter-bootstrap validation

【解决方案1】：

您应该在表单上监听submit 事件。如果出现验证错误，HTML5 验证器将停止提交。

$(".form-horizontal").submit(function(e) {
    e.preventDefault();
    $("#subcategory_markups").show();
});

【讨论】：

【解决方案2】：

请使用此语法来验证您的表单

$("#f").validate({
            rules: {
                field01: {
                    required: true
                },
                field02:{
                    required: true,
                },
                field03: {
                    required: true
                },
                field04: {
                    required: true,
                },
                field05: {
                    required: true
                }
            },
            submitHandler: function(form) {
                 form.submit(); //  or your action
             }
  });

这里的 f 是您的表单 ID，field0* 将是您想要输入的输入字段的名称。

【讨论】：