Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Jun 21st, 2012  |  syntax: None  |  size: 6.09 KB  |  hits: 9  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. Form will not validate
  2. //This is the main function
  3. function validate_form(form) {
  4.     var complete = false;
  5.  
  6.     //  Ensure that only one error message is diaplayed at a time
  7.     if (complete) {
  8.         clear_all();
  9.         complete = checkUsernameForLength(form.username.value);
  10.  
  11.     }
  12.     if (complete) {
  13.         clear_all();
  14.         complete = checkaddress(form.address.value);
  15.     }
  16.     if (complete) {
  17.         clear_all();
  18.         complete = checkaddress(form.address.value);
  19.     }
  20.  
  21.     if (complete) {
  22.         clear_all();
  23.         complete = checkphone(form.phone.value);
  24.     }
  25.     if (complete) {
  26.         clear_all();
  27.         complete = checkEmail(email.phone.value);
  28.     }
  29.  
  30. }
  31.  
  32. //Clear all red areas
  33.  
  34.  
  35. function clear_all() {
  36.  
  37.     document.getElementById('usernamehint').style.visibility = 'hidden';
  38.     document.basicform.username.style.backgroundColor = 'white';
  39.     document.getElementById("countryhint").style.visibility = 'hidden';
  40.     document.basicform.country.style.backgroundColor = 'white';
  41.     document.getElementById("").style.visibility = 'hidden';
  42.     document.basicformm.address.style.backgroundColor = 'white';
  43.     document.getElementById("").style.visibility = 'hidden';
  44.     document.basicform.phone.style.backgroundColor = 'white';
  45.     document.getElementById("").style.visibility = 'hidden';
  46.     document.basicform.email.style.backgroundColor = 'white';
  47.  
  48. }
  49.  
  50. // This function checks if the username field
  51. // is at least 6 characters long.
  52. // If so, it attaches class="welldone" to the
  53. // containing fieldset.
  54.  
  55.  
  56. function checkUsernameForLength(whatYouTyped) {
  57.     var fieldset = whatYouTyped.parentNode;
  58.     var txt = whatYouTyped.value;
  59.     if (txt.length > 2) {
  60.         fieldset.className = "welldone";
  61.         return true;
  62.     } else {
  63.         fieldset.className = "";
  64.         return false;
  65.     }
  66. }
  67.  
  68.  
  69.  
  70.  
  71. // This function checks the email address to be sure
  72. // it follows a certain pattern:
  73. // If so, it assigns class="welldone" to the containing
  74. // fieldset.
  75.  
  76. function checkEmail(whatYouTyped) {
  77.     var fieldset = whatYouTyped.parentNode;
  78.     var txt = whatYouTyped.value;
  79.     if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(txt)) {
  80.         fieldset.className = "welldone";
  81.     } else {
  82.         fieldset.className = "";
  83.     }
  84. }
  85.  
  86. // If the address is at least 4 characters long, the containing
  87. // fieldset is assigned class="kindagood".
  88.  
  89. function checkaddress(whatYouTyped) {
  90.     var fieldset = whatYouTyped.parentNode;
  91.     var txt = whatYouTyped.value;
  92.     if (txt.length > 3 && txt.length < 10) {
  93.         fieldset.className = "welldone";
  94.     } else {
  95.         fieldset.className = "";
  96.     }
  97. }
  98.  
  99.  
  100.  
  101. function checkphone(whatYouTyped) {
  102.     var fieldset = whatYouTyped.parentNode;
  103.     var txt = whatYouTyped.value;
  104.     if (/^((+d{1,3}(-| )?(?d)?(-| )?d{1,5})|((?d{2,6})?))(-| )?(d{3,4})(-| )?(d{4})(( x| ext)d{1,5}){0,1}$/.test(txt)) {
  105.         fieldset.className = "welldone";
  106.     } else {
  107.         fieldset.className = "";
  108.     }
  109. }
  110.  
  111. // this part is for the form field hints to display
  112. // only on the condition that the text input has focus.
  113. // otherwise, it stays hidden.
  114.  
  115. function addLoadEvent(func) {
  116.     var oldonload = window.onload;
  117.     if (typeof window.onload != 'function') {
  118.         window.onload = func;
  119.     } else {
  120.         window.onload = function () {
  121.             oldonload();
  122.             func();
  123.         }
  124.     }
  125. }
  126.  
  127.  
  128. function prepareInputsForHints() {
  129.     var inputs = document.getElementsByTagName("input");
  130.     for (var i = 0; i < inputs.length; i++) {
  131.         inputs[i].onfocus = function () {
  132.             this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
  133.  
  134.         }
  135.  
  136.         inputs[i].onblur = function () {
  137.             this.parentNode.getElementsByTagName("span")[0].style.display = "none";
  138.         }
  139.     }
  140. }
  141. addLoadEvent(prepareInputsForHints);
  142.        
  143. <form action="#" name="basicform"  id="basicform"  onsubmit="return validate_form()" method="post" >
  144.  
  145.                                     <fieldset>
  146.                                         <label for="username">Name:</label>
  147.                                         <input type="text"id="username" onkeyup="checkUsernameForLength(this);" />
  148.                                       <span class="hint" id="usernamehint">This Field Must Not Be Left Blank !</span>
  149.                                     </fieldset>
  150.  
  151.                                      <fieldset>
  152.                                         <label for="country">Country:</label>
  153.                                         <input
  154.                                             type="text"
  155.                                             id="country"
  156.                                             onkeyup="checkaddress(this);" />
  157.                                         <span class="hint" id="countryhint">This Field Must Not Be Left Blank !</span>
  158.                                     </fieldset>
  159.  
  160.  
  161.                  <fieldset>
  162.                     <label for="Subject">Subject:</label>
  163.                     <input
  164.                         type="text"
  165.                         id="country"
  166.                         onkeyup="checkaddress(this);" />
  167.                     <span class="hint">Please Indicate What Your Interest Is !</span>
  168.                 </fieldset>
  169.  
  170.  
  171.  
  172.                  <fieldset>
  173.                     <label for="Phone">Phone:</label>
  174.                     <input
  175.                         type="text"
  176.                         id="Phone"
  177.                         onkeyup="checkphone(this);" />
  178.                     <span class="hint">This Feld Must Be Numeric Values Only !</span>
  179.                 </fieldset>
  180.  
  181.                 <fieldset>
  182.                     <label for="email">Email Address:</label>
  183.                     <input
  184.                         type="text"
  185.                         id="email"
  186.                         onkeyup="checkEmail(this);" />
  187.                     <span class="hint">You can enter your real address without worry - we don't spam!</span>
  188.                 </fieldset>
  189.  
  190.  
  191.                             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input value="send" class="gray" type="button" onclick="validate_form(this.form)"/>
  192.                   <br /><br /> <br /><br />  
  193.                 </form>
  194.        
  195. var complete = false;
  196.        
  197. if (complete) {...
create a new version of this paste RAW Paste Data