Forms

  1. Browsers that support this field will make sure this is a valid email address before submitting the form. This field also has a custom message if no response is given.
  2. adding a type of "tel" to your input field will bring up a number keyboard on mobile devices.
  3. This field expects a number and takes on additional styling from some browsers.
  4. This field is validated using a Regular Expression.
  5. Progress: 60% done. Progress bar
  6. 2 out of 10
    60% Meter element
To view front end validation submit this form incorrectly in a modern browser, basically anything except IE.

Bonus: Custom Message Script

Use by adding data attributes to the field for the type of error your messaging is for.

Possible Messages:
// User jQuery to listen to the fields changing and attach custom messages
jQuery('input, select, textarea')
	.each(function(){ validate(this); })
	.bind('input', function(){ validate(this); });
jQuery('select')
	.each(function(){ validate(this); })
	.bind('change', function(){ validate(this); });
			
function validate(input) {
		
	// Check to see if browser supports custom validity
	if(! input.validity) return;
			
	// If it does make a list of possible error states
	var validation_types = ['valueMissing', 'typeMismatch', 'patternMismatch', 'tooLong', 'rangeUnderflow', 'rangeOverflow', 'stepMismatch'];
		
	// Check each error state
	for(var i = 0; i < validation_types.length; i++) {
		
		// See if a custom message is set
		var msg = jQuery(input).attr('data-'+validation_types[i]);
		
		// See if the field has this type of error
		if(input.validity[validation_types[i]] && msg) {
		
		// override the default browser message
		input.setCustomValidity(msg);
		// exit out of the loop
		break;
		
		}else { input.setCustomValidity(null) } // Otherwise ignore
	}
}

Task

Create an email signup form that has a required email input and browser validation.