advanced code snippet search

Posted By

nerdfiles on 02/10/10


Tagged

validation


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

htl


Very Simple Form Validation (skeleton)

 / Published in: JavaScript
 

@data-validation values map to objects in patterns. I'm not sure of this thing's performance on large field sets. It cannot handle multiple validation rules yet.

Presupposes HTML5 namespace rules (specifically, @data-*)

Expand | Embed | Plain Text 
  1. document.getElementsByAttribute = function( attrib, value, context_node, tag ) {
  2.     var nodes = [];
  3.     if ( context_node == null )
  4.         context_node = this;
  5.     if ( tag == null ) 
  6.         tag = '*';
  7.     var elems = context_node.getElementsByTagName(tag);
  8.  
  9.     for ( var i = 0; i < elems.length; i += 1 ) {
  10.         if ( value ) {
  11.             if ( elems[i].hasAttribute(attrib) && elems[i].getAttribute(attrib) == value )
  12.                 nodes.push(elems[i]);
  13.         } else {
  14.             if ( elems[i].hasAttribute(attrib) )
  15.                 nodes.push(elems[i]);
  16.         }
  17.     }
  18.     return nodes;
  19. }
  20.  
  21. if (typeof validateElementsByRule != "function") {
  22.     var validateElementsByRule = function( form_node, options, patterns ) {
  23.  
  24.         if ( !options ) {
  25.             options = {
  26.                 livetype: false,
  27.                 errorBlock: true,
  28.                 errorBefore: "<li>",
  29.                 errorAfter: "</li>"
  30.             };
  31.         }
  32.  
  33.         if ( !patterns ) {
  34.             patterns = {
  35.                 "required": {
  36.                     filter: /^\S+$/,
  37.                     error: "Required!"
  38.                 },
  39.                 "digits": {
  40.                     filter: /^\d+$/,
  41.                     error: "Please enter digits only."
  42.                 },
  43.                 "zip": {
  44.                     filter: /(^\d{5}$)|(^\d{5}-\d{4}$)/,
  45.                     error: "Please provide a valid zip or postal code."
  46.                 }
  47.             };
  48.         }
  49.  
  50.         var errors = [];
  51.  
  52.         var elems = document.getElementsByAttribute( "data-validation", "", form_node );
  53.         for ( var i = 0; i < elems.length; i += 1 ) {
  54.             var reg = new RegExp(patterns[elems[i].getAttribute("data-validation")].filter);
  55.             if ( !reg.test(elems[i].value) ) {
  56.                 // store @id and error message
  57.                 errors.push([
  58.                     elems[i].getAttribute("id"),
  59.                     patterns[elems[i].getAttribute("data-validation")].error
  60.                 ]);
  61.             }
  62.         }
  63.  
  64.         if (options.livetype) {
  65.             for ( var p = 0; p < errors.length; p += 1 ) {
  66.                 document.getElementById(errors[p][0]).onkeyup = function() {
  67.                     validateElementsByRule( form_node, options, patterns);
  68.                 }
  69.             }
  70.         }
  71.  
  72.         if (options.errorBlock) {
  73.  
  74.             var errorBlockChild = document.getElementById("error-block");
  75.             if (errorBlockChild) {
  76.                 var errorBlockParent = errorBlockChild.parentNode;
  77.                 errorBlockParent.removeChild(errorBlockChild);
  78.             }
  79.  
  80.             var error_output = "<ol>";
  81.             for ( var p = 0; p < errors.length; p += 1 ) {
  82.                 error_output += options.errorBefore+"<label for="+errors[p][0]+">"+errors[p][1]+"</label>"+options.errorAfter;
  83.             }
  84.             error_output += "</ol>";
  85.             var errorBlock = document.createElement("div");
  86.             errorBlock.setAttribute("id", "error-block");
  87.             errorBlock.innerHTML = error_output;
  88.             var parentDiv = form_node.parentNode;
  89.             parentDiv.insertBefore(errorBlock, form_node);
  90.         }
  91.  
  92.         return errors;
  93.  
  94.     }
  95. }
  96.  
  97. window.onload = function() {
  98.     var new_form = document.getElementById('theform');
  99.     var options = {
  100.         livetype: true,
  101.         errorBlock: true,
  102.         errorBefore: "<li>",
  103.         errorAfter: "</li>"
  104.     }
  105.     new_form.onsubmit = function() {
  106.         if ( validateElementsByRule( new_form, options).length ) {
  107.             console.log( validateElementsByRule( new_form, options) );
  108.             return false;
  109.         }
  110.     }
  111. };
  112.  
  113. /*
  114. Test inputs:
  115. <form id="theform" action="" method="post">
  116.     <input id="cheese" value="" type="text" data-validation="required" />
  117.     <input id="cheese2" value="" type="text" data-validation="zip" />
  118.     <input type="submit" value="Validate" />
  119. </form>
  120. */

Report this snippet  

You need to login to post a comment.