jQuery Validate seems to pass invalid form to submitHandler

Question

I am trying to use jQuery Validate to prevent my ajax form submit when three fields contain any characters other than digits. Apparently I'm doing something wrong, but I can't see what.

EDIT: There seem to be two errors. My validation rules use the field ID instead of the field name. However, after fixing that problem, the form still validates unexpectedly..

This is my jQuery code:

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

Here's what I see in the inspector when I put a breakpoint inside the submitHandler. It is getting to the submitHandler despite bad input (a value of 'dsdfd' instead of '123')

This is the relevant markup:

<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

You've got your rules set up with the "id" values for the <input> elements instead of their "name" values. Should be:

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

edit — now that you've fixed that, I think the problem is that the "value" properties of the input elements are empty, because you've declared them type=number. Firefox and Chrome let you type anything into the fields, but they won't have a non-empty value unless the fields really do contain numbers.

If you also mark the fields as required, then it works. fiddle