The option of using pure HTML, sometimes with a touch of CSS, to complement Java Script form validation was until recently unthinkable.
Before you ask, and someone always does, these examples will currently work in the following browsers: Safari 5, Chrome 6, Opera 9, Firefox 4 Beta and the i Phone/i Pad.
Also each browser has a slightly different default behaviour.
The simplest change you can make to your forms is to mark a text input field as 'required': This informs the (HTML5-aware) web browser that the field is to be considered mandatory.
Different browsers may mark the input box in some way (Firefox 4 Beta adds a red box-shadow by default), display a warning (Opera) or even prevent the form from being submitted if this field has no value.
Hopefully these behaviours will converge in future releases.
For these examples we have created our own valid/invalid CSS formatting to override the browser default. That's why you may see something like the following: Before you type anything into the box a red marker is shown.As soon as a single character has been entered this changes to a green marker to indicate that the input is 'valid'.Using CSS you can place markers inside or alongside the input box, or simply use background colours and borders as some browsers do by default. On the i Phone/i Pad the different input types are associated with different keyboards, making it easier for people to complete your online forms.In other web browsers they can be used in combination with the .Obviously neither example is very limiting, but it will prevent people from entering completely wrong values, such as phone number, strings with multiple '@'s or spaces.Here is how it appears in Safari (with our CSS formatting to show the (in)valid state): In a similar fashion to the Again, the input box appears as normal: This time the minimum requirement for most browsers is one or more letters followed by a colon.