Skip to Content Skip to Navigation

User Experience Toolkit

Input Error Style

When forms fail to submit on the server side, returning the user to the page and clearly indicating the inputs that have errored out is great usability enhancement.

Default Implementation

Example:
HTML:
	<form id="valid-demo-1" method="POST" class="ux-form">
		<label for="fname">
			<span>
				First Name<abbr class="required" title="Require Field">*</abbr>
			</span>
			<input type="text" id="fname" class="validate[required] input-error" />
		</label>
		<label for="lname"> 
			<span>
				Last Name<abbr class="required" title="Require Field">*</abbr>
			</span>
			<input type="text" id="lname" class="validate[required]" value="valid input" />
		</label>
		<input type="submit" class="button primary no-icon" value="Submit" />
	</form>

When an invalid form is return to the end user, invalid fields should be clearly identifiable. In the example above the first name field receives a special red style to indicate that it is the field in error. To apply this style, simply add the class of input-error onto any text input, textarea, or select element.

Thanks for the feedback! It will help us improve your experience.