HTML5 форма проверки до щелчка события

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

здесь е ваша форма идентификатор и field0 * будет имя вашего поля ввода, которые вы хотите быть необходимы.