jQuery validate submitHandler does not fire

Question

$('#createPatrolForm').on('submit', function() {
  var type = $('input[name="patrol_type"]:checked').val(); // remote, onsite, guard

  $('#createPatrolForm').validate({
    debug: true,
    ignore: "input[type='text']:hidden",
    rules: {
      start_datetime: {
        required: true,
        check_current_dt: true,
      },
      end_datetime: {
        required: true,
        check_date: true,
      },
    },
    messages: {
      start_datetime: {
        required: "Start date & time is required",
      },
      end_datetime: {
        required: "End date & time is required",
      },
    },
    success: function(el) {
      // alert('sucess');
    },
    submitHandler: function(form) {
      alert('Submit Handler................');
    },
    invalidHandler: function(event, validator) {
      // Display error alert on form submit
      var errors = validator.numberOfInvalids();

      if (errors) {
        var invalidElements = validator.invalidElements();
        alert(`invalidElements`);

        var message = errors == 1 ? 'Validate field' : 'Check ' + errors + ' fields';
        alert('Message = ' + message);
      }
    }
  });
});

Please use the search function... this issue has been addressed many times. Do not enclose the `.validate()` method within a submit event handler... it only gets called on page load to initialize the plugin. The fact that the plugin already has it's own `submitHandler` function built into it should be a clue that you don't need to write your own submit handler function. — Sparky, Jan 20 '21 at 22:41

score 1 · Answer 1 · answered Jan 20 '21 at 15:49

The issue is because you need to initialise the validation library on the form when the page loads, not when the form itself is submit. Try this:

jQuery($ => {
  $('#createPatrolForm').validate({
    debug: true,
    ignore: "input[type='text']:hidden",
    rules: {
      start_datetime: {
        required: true,
        check_current_dt: true,
      },
      end_datetime: {
        required: true,
        check_date: true,
      },
    },
    // all your other options here...
  });
  
  // your other jQuery code here...
});

jQuery validate submitHandler does not fire

1 Answers1