Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

328 CHAPTER 7 Working with forms

FIGURE 7-7 URL validation fails with incomplete message

The validation message is incomplete. To implement the pattern attribute properly, you

must provide a title attribute that gives a hint to the user about what is required. The title will

be displayed in the validation failure message. The following is the modified <form> element.

<form id="myForm">

website:

<input type="url" name="website"

title="http://contoso.com or https://contoso.com"

required="required" pattern="https?://.+" />

<button type="submit" name="submit">Submit</button>

</form>

After the title attribute is supplied and the user enters invalid data, the new validation

error message is displayed, as shown in Figure 7-8.

FIGURE 7-8 he URL validation message with the title suppliedT