jQuery验证submitHandler不触发

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

Answer 1

问题在于您需要在页面加载时初始化表单上的验证库，而不是在表单本身提交时初始化。试试这个:

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