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}
    },

edit — 既然您已经解决了这个问题，我认为问题在于输入元素的“值”属性是空的，因为您已将它们声明为 type=number。 Firefox 和 Chrome 允许您在字段中输入任何内容，但它们不会有非空值，除非字段确实包含数字。

如果您还根据需要标记字段，则它可以工作。 fiddle