skip to content »

Validating forms using html5

validating forms using html5-54

Using the same data input, notice how the browser responds to the click of the Send Data button in Figure 5.

validating forms using html5-58

The value of the Internet would be insignificant compared with what it is today.So it goes without saying that a required factor for many successful websites is the ability to acquire data from a user.And because user interaction plays such a key role in the overall web experience, it isn't surprising that among the many improvements found in HTML5 are feature enhancements to form input.Although the table in Figure 10 isn't a complete list of all the new HTML5 input-validation methods and attributes, it represents the core validation behavior that you need to have greater control over the process.Returning to the issue of how browsers provide error messages, what if we wanted to create our own messages?However, with the new pattern attribute, we can enforce a custom telephone format using a regular expression, as follows: Now what about the input requesting the user's name? However, if the user submits the form with no text, the name will be submitted with no value. This is the purpose of the Microsoft has introduced another state supported in IE 10.0, known as "placeholder" state, which allows CSS developers to control the style of placeholder data.

Note that this is not the same as "optional" state, as a required field can have "placeholder" data in it.

To provide some context for the new features, let's first peer into a simple HTML form that doesn't use any of the new features, as shown in Figure 1.

The simple form is functional, but it poses some common data-collection challenges.

In this article, I will introduce these new form features, exploring some of the new elements and attributes, how to apply styles, and new ways to control validation in script.

Rather than try to cover everything that is new, instead I will focus on some practical aspects of HTML5 form development that you can start using today.

What would be the advantage of using these new input types instead of text? Applying a more specific type than text to form data gives parsing engines a better understanding of what the data means.