jQuery Validate似乎將無效表單傳遞給submitHandler

Question

我試圖使用jQuery Validate來阻止我的ajax表單提交三個字段包含除數字以外的任何字符。 顯然我做錯了什么，但我看不清楚是什么。

編輯 ：似乎有兩個錯誤。 我的驗證規則使用字段ID而不是字段名稱。 但是，在修復該問題后，表單仍然意外驗證..

這是我的jQuery代碼：

(function() {
  $(document).ready(function() {

    formSubmits();

    /**
     * Handles all the form submits that go on.
     * This is primarily the ID search and the form submit.
     */
    function formSubmits() {

      /*** SAVE RECIPE ***/
      // validate form
      $("#category-editor").validate({
        rules: {
          "time-prep": {number: true},    /* not sure why validation doesn't work.. */
          "time-total": {number: true},   /* according to this, it should: http://goo.gl/9z2odC */
          "quantity-servings": {number: true}
        },
        submitHandler: function(form) {

          // submit changes
          $.getJSON("setRecipe.php", $(form).serialize() )
            .done(function(data) {

              // de-empahaize submit button
              $('.footer input[type=submit]')
                .removeClass('btn-primary')
                .addClass('btn-default');
            });

          // prevent http submit
          return false;
        }
      });
    }
  });
})(jQuery);

當我在submitHandler中放置斷點時，這是我在檢查器中看到的內容。 盡管輸入錯誤（'dsdfd'而不是'123'的值），它仍然轉到submitHandler

這是相關的標記：

<form id="category-editor" class="form-inline" method="get">

....
                <div class='form-group'>
                  <div>
                    <label for="time-prep">Prep time (min):</label>
                    <input value="" id="time-prep" name="activeTime" class="form-control min-calc jqValidateNum" data-calc-dest="time-prep-desc" type="number"> 
                    <input value="" id="time-prep-desc" name="activeTimeDesc" class="form-control subtle" type="text"> 
                  </div>
                </div>

                <div class='form-group'>                    
                  <div>
                    <label for="time-total">Total time (min):</label>
                    <input value="" id="time-total" name="totalTime" class="form-control min-calc jqValidateNum" data-calc-dest="time-total-desc" type="number"> 
                    <input value="" id="time-total-desc" name="totalTimeDesc" class="form-control subtle" type="text"> 
                  </div>
                </div>

                <div class='form-group'>                    
                  <div>
                    <label for="quantity-servings">Servings:</label>
                    <input value="" id="quantity-servings" name="servings" class="form-control jqValidateNum" type="number"> 
                  </div>
                </div>

....
</form>

Answer 1

您已使用<input>元素的“id”值而不是“name”值設置規則。 應該：

    rules: {
      "activeTime": {number: true}, 
      "totalTime": {number: true},
      "servings": {number: true}
    },

編輯 - 現在你已經解決了這個問題，我認為問題是輸入元素的“value”屬性是空的，因為你已聲明它們是type=number 。 Firefox和Chrome允許您在字段中鍵入任何內容，但除非字段確實包含數字，否則它們不會具有非空值。

如果您還根據需要標記字段，那么它可以工作。 小提琴