FORM validation using YUI

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.

Form validatin screen1

Error showing mandatory fields are not entered

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.

Advertisement