Test Form Validation

This test shows the form within a table.

(with pop-up)
(with pop-up both)
keep from too long:
max value:
email:
phone:
Something to pull down:
initial:
verify initial:

Code to make this work:

JavaScript

Much of the same code from the first Validator Example will work in this example. Such as loading the external script and intializing it. The biggest change comes in the HTML where the form's onsubmit event handler is used to validate the form.

HTML

This example usage of Validator uses an HTML table to store the information instead of laying out the inforamtion using CSS. One of Validator's advantages is that it will work equally well with either form of layout.

  1. <form action="" method="" accept-charset="utf-8" onsubmit="return validatorCheckForm(this);">
  2.    <table border="0" cellspacing="5" cellpadding="5">
  3.       <tr>
  4.          <td><label for="test1">first name:</label> (with pop-up)</td>
  5.          <td><input id="test1" name="MyFirstName" required="required" popup="only" requirederrmsg="We need your name." /></td>
  6.       </tr>
  7.       <tr>
  8.          <td><label for="test2"> last name:</label> (with pop-up both)</td>
  9.          <td><input id="test2" name="lastName" popup="both" required="required" /></td>
  10.       </tr>
  11.       <tr>
  12.          <td>keep from too long:</td>
  13.          <td><textarea id="longstuff" name="notToLongStuff" maxlen="95" maxwords="3">hi!</textarea></td>
  14.       </tr>
  15.       <tr>
  16.          <td><label for="short_stuff">keep from too short:</label></td>
  17.          <td><textarea id="short_stuff" name="short_stuff" minlen="95">hi!</textarea></td>
  18.       </tr>
  19.       <tr>
  20.          <td>max value: </td>
  21.          <td><input id="maxNum" name="MaxValue" maxval="35" /></td>
  22.       </tr>
  23.       <tr>
  24.          <td>email:</td>
  25.          <td><input id="your_email" name="your_email" email="email" errmsg="Please enter a valid e-mail address." /></td>
  26.       </tr>
  27.       <tr>
  28.          <td>phone:</td>
  29.          <td><input id="your_phone" name="your_phone" usphone="usphone" required="true" usphoneerrmsg="Please enter a valid phone number." /></td>
  30.       </tr>
  31.       <tr>
  32.          <td>Something to pull down:</td>
  33.          <td>
  34.             <select notfirst="notfirst" name="ListSelector" id="ListSelector">
  35.                <option>pick something other than me</option>
  36.                <option>pick me</option>
  37.                <option>or you could pick  me</option>
  38.             </select>
  39.          </td>
  40.       </tr>
  41.       <tr>
  42.          <td>initial:</td>
  43.          <td><input id="initial" name="initial" required="true" /></td>
  44.       </tr>
  45.       <tr>
  46.          <td>verify initial:</td>
  47.          <td><input id="match" name="match" matches="initial"  /></td>
  48.       </tr>
  49.    </table>
  50.    <br />
  51.    <input type="submit" value="Continue" />
  52. </form>