fm-ezra6-1

Complete Form Validation JavaScript Part 5

Apr 30th, 2018
106
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.09 KB | None | 0 0
  1. <style type="text/css">
  2.     .success_brd{
  3.         border:1px solid green
  4.     }
  5. </style>
  6.  
  7. <script type="text/javascript">
  8. //////////////// This update checks all empty fields ////////////
  9.     //function checks for empty fields
  10.     function CheckEmpty(field_id){
  11.         var MyValue = document.getElementById(field_id);
  12.         if(MyValue.value == "" || MyValue.value == null){
  13.             //code
  14.             displayWarning(field_id, MyValue.parentNode.id, "You can't leave this empty.");
  15.         }
  16.         else {
  17.             removeWarning(field_id, MyValue.parentNode.id);
  18.         }
  19.     }
  20.  
  21. //////////////// This update will validate the checkbox ////////////
  22. //function checks the checkboxes
  23.     function ValidateCheckbox(checkbox){
  24.         var check_box = document.getElementById(checkbox);
  25.         if(check_box.checked == false){
  26.             //code
  27.             displayWarning(checkbox, check_box.parentNode.parentNode.id, "You must agree to proceed.");
  28.         }
  29.         else {
  30.             removeWarning(checkbox, check_box.parentNode.parentNode.id);
  31.         }
  32.     }
  33.  
  34. //////////////// This is an update to confirm the selection list ////////////
  35.     //function validates the selections
  36.     function ValidateSelect(select){
  37.         //code
  38.         selected = document.getElementById(select);
  39.         if(selected.selectedIndex == 0){
  40.             //code
  41.             displayWarning(select, selected.parentNode.id, "Please select your country.");
  42.         }
  43.         else {
  44.             removeWarning(select, selected.parentNode.id);
  45.         }
  46.     }
  47.  
  48. //////////////// This is a new function ////////////
  49.     //function remove error message
  50.     function removeWarning(field_id, parent_div){
  51.         var error_element = document.getElementById(parent_div).querySelectorAll(".warning_msg");
  52.         if (error_element.length > 0){
  53.             error_element[0].parentNode.removeChild(error_element[0]);
  54.             document.getElementById(field_id).classList.remove("warning_brd");
  55.            
  56.         }
  57.         document.getElementById(field_id).className += " success_brd";
  58.     }
  59. </script>
Add Comment
Please, Sign In to add comment