点击事件

Question

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

 <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属性。但这意味着我的点击事件不会触发。在启动click事件之前，有没有办法让我的表单验证？

提前致谢!!

Answer 1

您应该在表单上收听submit事件。然后，如果存在验证错误，HTML5验证器将停止提交。

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

Answer 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 *将是你想要的输入字段的名称。