My Web Training

📖 jQuery Form Validation

jQuery provides many form validation tools to enhance the interactive experience of users attempting to fill out forms online. These tools offer the enhanced benefit of providing immediate feedback to users on their input progress.

Selecting Form Elements

jQuery has special selectors for form field types.

• :input
• :text
• :password
• :radio
• :checkbox
• :submit
• :image
• :reset
• :button
• :file
• :hidden

jQuery also provides certain filters for form fields that can be used as selectors.

• :checked (checkboxes and radio buttons that have been turned on or checked)
• :selected (selected option in a selection list or menu)

Form Element Values

Use val() function to retrieve a value: var varName = $('#name').val();

To set a value in a form field: $('#total').val(total);

To find out if a form field has been checked: if ($mailList).prop('checked')) { . . . }

** Note, this has changed from the book example with the latest version of jQuery. It now uses prop instead of attr.

Form Events

submit()

triggered when the form is submitted - often used for validation

$('#entry').submit(function() { validation goes here... });

focus()

triggered when the cursor is on or in a form element

blur()

opposite of focus() - triggered when the cursor leaves a form element

click()

triggered when a form element is clicked

change()

triggered when the value of a form element changes

reload()

reloads the current document (web page)

location.reload();

Blur Example

$('#username').blur(function() {
	if ($(this).val() == "") {
		// set error for empty field.
		$('#nameErr').text('Username is required');
	} else {
		// set error to blank in case a prior error message was displayed.
		$('#nameErr').text('');
	}
}); // end validate username

Reload Example

$('#copy').click(function() {
	if ($(this).prop('checked')) {
		// copies a value from #address
		var address = $('#address').val();
		// assigns the value from #address to #shipaddr
		$('#shipaddr').val(address);
		// reloads the page
		location.reload();
	}
});

Form Methods

focus():

places focus in the selected form element

hide():

hides tthe selected form element

show():

shows the selected form element

attr('disabled',true):

disables the selected form element. To enable a disabled form element use removeAttr('disabled'). This is another change in the latest version of jQuery

Example

// place cursor in username field
$('#username').focus();

Form Validation

Form validation is one of the most common and useful applications for JavaScript. It allows you to quickly inform the user of any errors and ensure complete and appropriate data. It does not require a trip to the server before the user receives feedback but you still need to provide server-side validation for browsers that do not support JavaScript or users who have turned off JavaScript.

Process

• Use HTML 5 Form enhancements to add validation wherever possible: required, type="email","url", pattern, etc.
• Add custom validation on blur for text fields (occurs when the user moves to another field) and on submit for all fields to validate the entire form.
• Cancel submission of the form if any errors are found.

Example

You can see the full class example at https://2learnweb.brookhavencollege.edu/profherd/javascript/examples/web-forms-example/.