Hi,

I am here writing out a script for form validation using YUI. (yahoo user interface). YUI is a opensource javascript library from Yahoo. Which turely a good library for a webdev.

See the Demo here.

The files that you require for this are two javascript files. One is from YUI called yahoo-dom-event.js and the other is developed by me formValidator.js.

Main Key features of this code is

• only you have to use one id for the form id=”loginForm”
• only you have to use the class names password, email, input. No need of individual ids.
• script will take care of the validation depending on the class names.

Here is the HTML.

<div class="loginArea">
  <form action="#" method="post" id="loginForm" >
    <fieldset>
    <div class="errorMsgCont"></div>
    <ul>
      <li>
        <label for="username">User name</label>
        <input type="text" name="username" class="username" />
      </li>
      <li>
        <label for="password">Password</label>
        <input type="password" name="password" class="password" />
      </li>
      <li>
        <label for="repassword">Re-Type Password</label>
        <input type="password" name="repassword" class="password" />
      </li>
      <li>
        <label for="email">email id</label>
        <input type="text" name="email" class="email" />
      </li>
      <li class="terms">
        <input type="checkbox" name="terms" class="terms" />
        <p>I here by agree to the terms and conditions of the Site</p>
        <div class="erroTerms">you have to agree</div>
      </li>
      <li class="buttons">
        <input type="submit" id="submit" name="submit" value="Register" />
        <input type="reset" id="reset" name="reset" value="Reset" />
      </li>
    </ul>
    </fieldset>
  </form>
</div>

Check the demo, if you find its usefull then leave me a comment.