Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

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
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.