How to Register a Domain Name for Your HTML5 and CSS3 Site
How to Create Cascading Style Sheets (CSS) Simply and Easily
10 Stellar Web Resources for HTML5 and CSS3

How to Validate HTML Form Elements in JavaScript

Validation is an important part of working with HTML forms. Unfortunately, not every browser provides support for the validation features of HTML5. The example you find here won’t work with Internet Explorer because Internet Explorer fails to support any of the HTML5 validation features.

A large part of validating data in HTML5 is creating the right type of form. The following code shows a simple form with a name, telephone number, and two password fields (an original and a confirmation).

<form action="#" method="post"
   enctype="multipart/form-data">
  <fieldset>
   <div>
     <label>Name:</label>
     <input id="Name"
        type="text"
        placeholder="Type Your Name"
        maxlength="100"
        required
        x-moz-errormessage="Type Your Name"/>
   </div>
   <div>
     <label>Telephone:</label>
     <input id="Telephone"
        type="tel"
        placeholder="Type Your Number"
        pattern="\d\d\d \d\d\d \d\d\d\d"
        required
        x-moz-errormessage=
          "Type Your Number as XXX XXX XXXX"/>
   </div>
   <div>
     <label>Password:</label>
     <input id="P1"
        type="password"
        placeholder="Password" />
   </div>
   <div>
     <label>Confirm Password:</label>
     <input id="P2"
        type="password"
        placeholder="Password"
        onfocus="ValidatePassword(
         document.getElementById('P1'), this);"
        oninput="ValidatePassword(
         document.getElementById('P1'), this);"/>
   </div>
  </fieldset>
  <fieldset>
   <div>
     <input id="Submit"
        type="submit"
        value="Submit Data" />
   </div>
  </fieldset>
</form>

The first two fields use automatic validation as supplied by HTML5. Notice the use of the required attribute in both cases, which means the user must type a value (not necessarily a correct value).

In addition, the placeholder attribute provides a clue as to what the user needs to type, which is always a good first step in obtaining information. The maxlength attribute prevents users from trying to type too much or someone inputting a script instead of content. Likewise, the pattern attribute looks for specific information from the user.

The generic error messages that HMTL5 provides are acceptable, but hardly enlightening. This example shows how to use the x-moz-errormessage attribute in order to create a custom error message. Many browsers don’t support this attribute, so users may still see the generic error message, but there’s at least a chance that users will see something that’s a little more targeted toward providing helpful information.

The two password fields can’t rely on standard HTML5 validation. In this case, you must use JavaScript to confirm that the user has entered the same password in both fields and that the fields do, in fact, contain a password. Here’s the ValidatePassword() function used to perform the validation:

function ValidatePassword(P1, P2)
{
  if (P1.value != P2.value ||
    P1.value == "" ||
    P2.value == "")
  {
   P2.setCustomValidity(
     "The Password Is Incorrect");
  }
  else
  {
   P2.setCustomValidity("");
  }
}

The example verifies that both password fields contain an entry and that the entry is the same in both fields. Of course, your password check could do more. The error message appears as a pop-up. Notice how each field contains a helpful hint on what to type.

image0.jpg
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Create a New JavaScript File in Komodo Edit
How to Use IrfanView’s Built-In Effects for HTML5 and CSS3 Programming
How to Create Pong in Your HTML5 Game
How to Change HTML Elements in JavaScript
How to Build and Define a Basic Table for HTML5 and CSS3 Web Based Pages
Advertisement

Inside Dummies.com