Loading ...
Sorry, an error occurred while loading the content.

Re: Form Validation with YUI

Expand Messages
  • oct3six
    I started using CSS classes to validate input fields on the client a long time ago, but the YUI Dom.hasClass and Dom.replaceClass functions make the technique
    Message 1 of 4 , Aug 29, 2006
    • 0 Attachment
      I started using CSS classes to validate input fields on the client a
      long time ago, but the YUI Dom.hasClass and Dom.replaceClass
      functions make the technique much more elegant. Two greatest
      functions evar. (addListener is a close third)

      Here is a link to a live demo, but i've included the js snippet
      below for reference. It really only works for text boxes and text
      areas. Just set the class="required" for all the required fields.
      Add some css styles for a little flair.

      http://www.demoniusrex.com/CSSFormValidator/

      /**********************
      * cssFormValidator *
      * David Morrison *
      * 8/29/06 *
      **********************/

      // http://www.demoniusrex.com/cssformvalidator

      // requires yahoo.js and dom.js from the YUI library
      // http://developer.yahoo.com/yui/

      var CSSFormValidator = function(formName) {
      var f = document.getElementById(formName);
      if (f) {
      var i = f.getElementsByTagName("input");
      for(var q=0; q<i.length; q++) {
      if(checkInput(i[q])) {
      // field ok
      } else {
      return false;
      }
      }
      return true;
      } else {
      return false;
      }
      };

      var checkInput = function (i) {
      if (YAHOO.util.Dom.hasClass(i,"required")) {
      if(i.value == "") {
      YAHOO.util.Dom.replaceClass(i,"complete","incomplete");
      return false;
      } else {
      YAHOO.util.Dom.replaceClass(i,"incomplete","complete");
      }
      }
      return true;
      };


      --- In ydn-javascript@yahoogroups.com, "juliusdietz"
      <juliusdietz@...>
      wrote:
      >
      > Hi,
      >
      > does it make sense and is there a module in the YUI to do client
      side
      > form validation with YUI?
      >
      > Thanks
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.