Validation Test:

This test shows the form within a series of label, and div elements.

Code to make this work:

JavaScript

You will notice a minimal amount of JavaScript. You only have to add a tag for including the script as well as initializing the validator. It does not auto intialize in case you didn't want automatically check as people left the form, only as they click the submit button. This is always a possibility with Validator.

  1. <!-- in head tag -->
  2. <script type="text/javascript" src="Validator.js"></script>
  3. <!-- body tag onload call -->
  4. <body onload="initializeValidator()">

HTML

you define your validation properties by adding the appropriate attributes and their values if they are required. This is a simple process. There is "no" limit to the number of properties you can add to your form fields, other than the max number of validation tools provided by the Validator library. It is best to avoid adding the same validation check twice to the same field, as the results are indeterminate.

  1. <form action="" method="" accept-charset="utf-8">
  2.     <h2>Validation Test:</h2>
  3.     <p>This test shows the form within a series of label, and div elements.</p>
  4.     <div><label for="firstName">first name: (with pop-up)</label>
  5.         <input id="firstName" name="MyFirstName" required="required" popup="popup" /></div>
  6.     <div><label for="test2">last name:</label>
  7.         <input id="test2" name="lastName" required="required" /></div>
  8.     <div><label for="longstuff">keep from too long:</label>
  9.         <textarea id="longstuff" name="notToLongStuff" maxlen="95" maxwords="3">hi!</textarea></div>
  10.     <div><label for="maxNum">max value:</label>
  11.         <input id="maxNum" name="MaxValue" maxval="35" /></div>
  12.     <div><label for="email">email: </label>
  13.         <input id="email" name="email" email="email" /></div>
  14.     <div><label for="phone">phone: </label>
  15.         <input id="phone" name="phone" usphone="usphone" /></div>
  16.     <div><label for="price">price: </label>
  17.         <input id="price" name="price" uscurrency="true" /></div>
  18.     <input type="submit" value="Continue" />
  19. </form>

CSS

  1. .errMsg {
  2.     background-color: #fcc;
  3.     font-weight: bold;
  4.     color: #900;
  5.     margin: 2px;
  6.     padding: 6px;
  7.     border: #900 2px solid;
  8. }
  9. .requiredText {
  10.     color: #d00;
  11.     font-style: italic;
  12. }
  13. label {
  14.     float: left;
  15.     width: 155px;
  16.     text-align: right;
  17. }
  18. form div {
  19.     clear: both;
  20. }