1) Your usage of e.preventDefault()
is incorrect and unnecessary. If you simply want to block the regular form submit, then put a return false
at the end of the submitHandler
callback function.
submitHandler: function (form) {
eventAdd();
return false; // block form submit
}
2) You are missing a comma right after your rules option.
rules: {
title: {
minlength: 2,
required: true
},
description: {
minlength: 2,
required: true
}
}, // <-- this comma was missing
3) The plugin's resetForm()
method is for resetting the validation only... removing any error messages and returning the form to its initial validation state. It will not, however, remove any data entries from the fields.
Edit: Since you're only calling it from submitHandler
, it will never do anything. That's because submitHandler
only fires on a valid form.
Add a line with $('form').get(0).reset()
if you want to clear out the fields.
function eventAdd() {
$.gritter.add({
title: 'SUCCESS!',
text: 'Event saved successfully.',
sticky: false,
time: '10000'
});
// validator.resetForm(); // reset validation - superfluous here
$('form').get(0).reset(); // clear the fields
}
Working DEMO: http://jsfiddle.net/t3dtG/
Edit: .resetForm()
is only for resetting the validation (removing outstanding error messages). I removed .resetForm()
above because it's superfluous in this context. The submitHandler
only fires when the form is valid, therefore, there is nothing for resetForm()
to do.