click事件

Question

之前HTML5表單驗證我有以下表單，輸入按鈕：

<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屬性。但這意味着我的點擊事件不會觸發。有沒有一種方法可以讓我的表單在觸發點擊事件之前驗證？

在此先感謝！

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 *將要需要你輸入字段的名稱。