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-*)

  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.