· 2 min read
New way to validate forms into HTML5
HTML 5 specification isn’t finished now, but mainstream web browsers have already supported some part of this new standard.
In this short article, I’ve check new form validator into HyperText Markup Language 5 and new browsers (Chrome 5.0.375.99, Safari 5.0 (6533.16), Opera 10.60). Firstly: Firefox 3.6.8 didn’t support this part of HTML5.
Email address validation
<input type="email" name="email" />URL validation
<input type="url" name="url" />Required field with example text
<input type="text" name="surname" placeholder="Kowalski" required />Browser will not send form, if field have attribute required and value will be empty.
Attribute placeholder works only with fields type text, email, url, search, tel and password.
In Opera 10.60 MacOSX placeholder is invisible. In Chrome and Safari example text (placeholder) works correct.
Phone number validation with pattern and example
<input type="tel" name="phone" placeholder="601-102-203" pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}" />Into pattern we have to put required regular expression.
Getting number from range [1, 100]
<input type="number" name="home_number" placeholder="Home number?" min="1" max="100" />Attribute min — minimal value, max — maximal value.
Select value from list
<input type="text" name="sex" placeholder="Select your sex" list="genders" />
<datalist id="genders">
<option value="W" label="woman"></option>
<option value="M" label="man"></option>
</datalist>Lists works rightly only in Opera. Into specification, there is a word about multiple values select (with attribute multiple), but it don’t works in any browser.
Date validation
<input type="date" name="birthday" min="1890-01-01" max="1999-12-31" />Into attributes min and max we put date in format YYYY-MM-DD (year-month-day). In Opera, when we select this field, appears built-in into browser small calendar. In Safari we can change date by arrow up and down.
For memories, placeholder is not implemented for field with date or time type.
Getting time
<input type="time" name="time" min="08:00" />We can put time in format hh:mm (hour:minute).
In Opera and Safari we can change value by arrow up or down.
Getting month
<input type="month" name="month" />Month we put in format YYYY-MM (year-month).
Getting week
<input type="week" name="week" />Week we put in foramt YYYY-WMM (year-Wweek).
Date time validation
We have got here 2 cases — we can get local time or universal (UTC).
LOCAL TIME
Correct format YYYY-MM-DDThh:mm (year-month-dayThour:minute). We have got here 16 characters.
UTC
<input type="datetime" name="utc_datetime" />Correct format YYYY-MM-DDThh:mmZ (year-month-dayThour:minuteZ). Here we have 17 characters.
Select value from range with slider
<input type="range" name="opacity" min="0" max="100" step="5" value="80" />Simple slider, which help us change numeral value of field. This field always have some value from min — max range. Look also at attribute step.
Search field
<input type="search" name="query" placeholder="Search..." />This field works like text field and only different is in his visual presentation in various browsers. Now its works only in Safari.