Tuesday 13 November 2012

HMTL 5, CSS3 and JavaScript for Windows 8 – User Input Validation

HTML 5 Supports new validation fields and new input types. This new features are going to make the life really easy for us if we know what we have and what we can use.

The <input> tag supports in the type attribute, the following values:

button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week

There are some tips you should know:

    • If one of the types is not supported by the browser, the field will be displayed anyway, but not in the correct format.
    • Use the form event to validate instead the input event.
    • HTML likes to emphasize the name and id attributes. id for CSS and name when the form is submitted.

We also have the required attribute. This attribute is completely new and allow us to validate client-side. A good validation will include server-side validation as well, so don’t forget to do that.

ie:  <input type="text" name="username" required="required" />

We can set maximum and minimum values with our input control. To do that we will be using the max attribute and the min attribute.

ie: <input type="text" name="price" type=”number” required="required" min=”5” max=”100” />

There is an excellent attribute it is going to help us formatting numbers or any character, very useful for phone numbers by the way. The attribute is called pattern.

The pattern attribute specifies a regular expression against which the control's value, or, when the multiple attribute applies and is set, the control's values, are to be checked.

If specified, the attribute's value must match the JavaScript Pattern production. [ECMA262]

If an input element has a pattern attribute specified, and the attribute's value, when compiled as a JavaScript regular expression with the global, ignoreCase, and multiline flags disabled (see ECMA262 Edition 5, sections 15.10.7.2 through 15.10.7.4), compiles successfully, then the resulting regular expression is the element's compiled pattern regular expression. If the element has no such attribute, or if the value doesn't compile successfully, then the element has no compiled pattern regular expression. [ECMA262]

Constraint validation: If the element's value is not the empty string, and either the element's multiple attribute is not specified or it does not apply to the input element given its type attribute's current state, and the element has a compiled pattern regular expression but that regular expression does not match the entirety of the element's value, then the element is suffering from a pattern mismatch.

Constraint validation: If the element's value is not the empty string, and the element's multiple attribute is specified and applies to the input element, and the element has a compiled pattern regular expression but that regular expression does not match the entirety of each of the element's values, then the element is suffering from a pattern mismatch.

The compiled pattern regular expression, when matched against a string, must have its start anchored to the start of the string and its end anchored to the end of the string.

Note:
This implies that the regular expression language used for this attribute is the same as that used in JavaScript, except that the pattern attribute is matched against the entire value, not just any subset (somewhat as if it implied a ^(?: at the start of the pattern and a )$ at the end).

When an input element has a pattern attribute specified, authors should include a title attribute to give a description of the pattern. User agents may use the contents of this attribute, if it is present, when informing the user that the pattern is not matched, or at any other suitable time, such as in a tooltip or read out by assistive technology when the control gains focus.

ie: <label> Part number: <input pattern="[0-9][A-Z]{3}" name="part" title="A part number is a digit followed by three uppercase letters."/> </label>

It will produce the following:

A part number is a digit followed by three uppercase letters.
You cannot submit this form when the field is incorrect.

How to create a nice border validation?
The best practice for validation logic is to add a red border when the validation has not been done properly. In CSS 3 you can add the valid/invalid into the input element.

For validation you could have the following:
input {
  border: solid 1px;
}
input:invalid{
   border-color: #f00;
}
input:valid{
  border-color: #0f0;
}

No comments: