What is Constraint Validation?
Every form field has a purpose. And this purpose is often governed by contraints — or the rules governing what should and shouldn’t be entered into each form field. For example, an email field will require a valid email address; a password field might require certain types of characters and have a minimum number of required characters; and a text field might have a limit on how many characters can be entered.
Modern browsers have the ability to check that these constraints are being observed by users, and can warn them when those rules have been breached. This is known as contstraint validation.
Client-side vs Server-side Validation
But first, here’s a big warning message:
Client-side validation is a nicety which can prevent common data-entry errors before an app wastes time and bandwidth sending data to a server. It’s not a substitute for server-side validation!
HTML5 Input Fields
But you’ll use <input> most often:
<input type=”text” name=”username” />
The type attribute sets the control type, and there’s a large choice of options:
a button with no default behavior
a check/tick box
a color picker
a date picker for the year, month, and day
a date and time picker
an email entry field
a file picker
a hidden field
a button which displays the image defined by the src attribute
a month and year picker
a number entry field
a password entry field with obscured text
a radio button
a slider control
a button that resets all form inputs to their default values (but avoid using this, as it’s rarely useful)
a search entry field
a form submission button
a telephone number entry field
a text entry field
a time picker with no time zone
a URL entry field
a week number and year picker
The browser falls back to text if you omit the type attribute or it doesn’t support an option. Modern browsers have good support for all types, but old browsers will still show a text entry field.
Other useful <input> attributes include:
file upload type
alternative text for the image types
hint for field auto-completion
focus field on page load
media capture input method
checkbox/radio is checked
disable the control (it won’t be validated or have its value submitted)
associate with a form using this ID
URL for submission on submit and image buttons
data type hint
ID of <datalist> autocomplete options
maximum string length
minimum string length
name of control, as submitted to server
a regular expression pattern, such as [A-Z]+ for one or more uppercase characters
placeholder text when the field value is empty
the field is not editable, but it will still be validated and submitted
the field is required
the size of the control (often overridden in CSS)
set true or false spell-checking
incremental values in numbers and ranges
field type (see above)
the initial value
HTML Output Fields
As well as input types, HTML5 provides read-only outputs:
output: a text result of a calculation or user action
progress: a progress bar with value and max attributes
meter: a scale which can change between green, amber, and red depending on the values set for the value, min, max, low, high, and optimum attributes.
Fields should have an associated <label>, which you can wrap around the element:
<label>your name <input type=”text” name=”name” /><label>
Or link the field’s id to the label using a for attribute:
<label for=”nameid”>your name</label>
<input type=”text” id=”nameid” name=”name” />
Labels are important for accessibility. You may have encountered forms which use a placeholder to save screen space:
<input type=”text” name=”name” value=”” placeholder=”your name” />
The placeholder text disappears once the user types something — even a single space. It’s better to show a label than force the user remember what the field wanted!
Field types and constraint attributes change the browser’s input behavior. For example, a number input shows a numeric keyboard on mobile devices. The field may show a spinner and keyboard up/down cursor presses will increment and decrement values.
Most field types are obvious, but there are exceptions. For example, credit cards are numeric, but the increment/decrement spinner is useless and it’s too easy to press up or down when entering a 16-digit number. It’s better to use a standard text type, but set the inputmode attribute to numeric, which shows an appropriate keyboard. Setting autocomplete=”cc-number” also suggests any pre-configured or previously entered card numbers.
import credit card details by scanning a card using the camera
import one-time-codes sent by SMS
The browser ensures an input value adheres with the constraints defined by the type, min, max, step, minlength, maxlength, pattern, and required attributes. For example:
<input type=”number” min=”1″ max=”100″ required />
Attempting to submit an empty value prevents form submission and shows the following message in Chrome:
You can stop browser validation by:
adding a novalidate attribute to the <form> element
adding a formnovalidate attribute to the submission button or image
1. Standard controls are difficult to style
CSS styling is limited and often requires hacks, such as overlaying an input with its label’s ::before and ::after pseudo-elements. The situation is improving, but question any design which prioritizes form over function.
2. Modern <input> types are not supported in old browsers
In essence, you’re coding for Internet Explorer. IE users won’t get a date picker but can still enter dates in YYYY-MM-DD format. If your client insists, then load a polyfill in IE only. There’s no need to burden modern browsers.
3. You require a new input type which has never been implemented before
In summary: avoid re-inventing HTML controls!
The Complete Guide to HTML Forms and Constraint Validation