HTML and CSS Reference
In-Depth Information
Next we are going to change the event listener that is invoked when “Save Task” is in-
voked. This will check whether the form is valid by calling the
valid
function on it. As you
have probably guessed, this is a function that has been added to jQuery by the jQuery Val-
idation plugin. The actual saving of the task will only occur if the form is valid:
$(taskPage).find('#saveTask').click(function(evt) {
evt.preventDefault();
if ($(taskPage).find('form').valid()) {
var task = $('form').toObject();
$('#taskRow').tmpl(task ).appendTo($(taskPage ).find( '#tblTasks tbody'));
}
});
If you now attempt to save a task without including mandatory fields, error messages will
be generated:
In order to see the elements that jQuery Validation has added, highlight the text that says
“This field is required”, right click on the text, and choose “Inspect element”: you should
see the following:
jQuery Validation has added a label with the class of
error
. This has then been rendered in
bold, red text by the following class in tasks.css:
