Lesson 9: Completing, Submitting and Validating User Input Forms

Hi viewers,

This week we will be learning about Completing, Submitting and Validating User Input Forms. This lesson is a continuation of developing HTML5 forms. In this lesson we will be discussing Concepts and Techniques for Validating User Input,The HTML5 pattern attribute, and Submitting Forms with the <button> Element. 

We will first discuss Submitting Forms with the <button> Element, since it is the first step before validating and pattern attribute.
The HTML <button> element with a type attribute value of "submit" creates a Submit button that submits a user's completed form data to the server for processing. You can use some global attributes such  as autofocus: applies focus on the <button> element when the page loads;

 form : specifies the form(s) on the page in which the <button> element appears by

binding the button to the form, to make the process easier. 

The second topic is Concepts and Techniques for Validating User Input:

User input validation ensures that user-entered data is properly formatted and complete. There are two main ways of validating a form. The two ways are

Inline validation occurs when each form field is validated as the user completes it, before the Submit button is clicked. The other is pogo-sticking: Occurs when users must submit and resubmit a form until it validates.

Tips for successful inline validation: 

Premature error messages can frustrate users: Allow an appropriate delay before providing feedback. Persistent messages that show success are most helpful for users: These are messages that are always visible to the user.

Success messages should be placed outside of form fields: Do not place them inside form fields, where they may confuse users

 Including inline validation wherever practical makes forms easier and faster for users to complete.

The HTML5 pattern attribute

The HTML5 pattern attribute helps ensure that certain types of form data are entered correctly, such as dates, email addresses, prices and URLs. The pattern input reminds the how each individual should be formatted. The pattern the incorrect, the computer send an error message. 

Desired User Input:
Pattern Attribute Example using JavaScript Regular Expressions

Country code:
<input type="text" pattern="[A-Za-z]{3}"> 

Date (dd/mm/yyyy):
<input type="text" pattern="\d{1,2}/\d{1,2}/\d{4}">

E-mail address :
<input type="email" pattern="^.+@.+quot;

Latitude / longitude :

<input type="text" pattern="-?\d{1,3}\.\d+">

Price :
<input type="text" pattern="\d+(\.\d{2})?">

URL :
<input type="url" pattern="https?://.+"> 

This the end of another lesson I hope that you now have a little knowledge about  Completing, Submitting and Validating User Input Forms.