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

Form validatin screen1

Error showing mandatory fields are not entered

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.

Advertisements

5 comments

  1. Looks good. However, I am confused since I am using ExtJS and they have a complete set of classes to manage form and its related activities.. Why does yahoo does not have it? And secondly, is it a good idea to have form elements created from JS instead of HTML markup?

    Regards,
    Accilies

    1. Yahoo UI library don’t have predefined classes for validation. If you need you can use the Jquery with a form validation plugin, which is very widely used.
      Its not a good practice of creating the form elements through JS. What if the user has disabled the JS in his browser?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s