API tools faq
paste
Advertisement
thotfrnk

week8_client_side_validation

thotfrnk
Nov 26th, 2023
901
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.63 KB | None | 0 0
raw download clone embed print report
  1. //index.html
  2. <!DOCTYPE html>
  3. <html>
  4.   <head>
  5.     <title>Client Side Validation</title>
  6.     <link rel="stylesheet" type="text/css" href="main.css" />
  7.   </head>
  8.   <body>
  9.     <div class="container">
  10.       <h3>I am trying to validate this form on the client</h3>
  11.       <br>
  12.       <form
  13.         id="reg_form"
  14.         name="reg_form"
  15.         method="post"
  16.         action="register.php"
  17.         onsubmit="return validate();"
  18.       >
  19.         <fieldset>
  20.           <legend>Registration</legend>
  21.           First Name: <input type="text" name="fname" id="fname" />
  22.           <span id="fname_err" class="error"></span>
  23.  
  24.           Last Name: <input type="text" name="lname" id="lname" /><br /><br />
  25.           <span id="lname_err" class="error"></span>
  26.  
  27.           Email: <input type="email" name="email" id="email" />
  28.  
  29.           Birth Year:
  30.           <input type="number" name="birth_yr" id="birth_yr" /><br /><br />
  31.  
  32.           Gender:
  33.           Male <input type="radio" name="gender" id="male" value="male" />
  34.           Female <input type="radio" name="gender" id="female" value="female" />
  35.           <br /><br />
  36.  
  37.           <input type="submit" name="submit" value="Register" />
  38.         </fieldset>
  39.       </form>
  40.     </div>
  41.     <script type="text/javascript" src="myJS.js"></script>
  42.  
  43.     <!--From js notes-->
  44.  
  45.     <script type="text/javascript">
  46.       Document.write("Hello World");
  47.       </script>
  48.  
  49.       <p id="learningJS">
  50.       </p>
  51.       <script type="text/javascript">
  52.       document.getElementById('learningJS').innerHTML="<br> <strong>This is an example of using the getElementById and innerHTML functions in JavaScript </strong> <br><br> Thank you!";
  53.       </script>
  54.  
  55.   </body>
  56. </html>
  57.  
  58. //register.php
  59. <!DOCTYPE html>
  60. <html>
  61.   <head>
  62.     <title>Client Side Validation</title>
  63.     <link rel="stylesheet" type="text/css" href="main.css">
  64.   </head>
  65.   <body>
  66.     <div class="container">
  67.       <h3>Registered!</h3>
  68.       <br />
  69.         <p>Hello <?php echo "$_POST[fname]. Thank you for registering with us."; ?></p>
  70.     </div>
  71.     <script type="text/javascript" src="myJS.js"></script>
  72.   </body>
  73. </html>
  74.  
  75. //myJS.js
  76. function validate(){
  77.  
  78.     // clearErrors();
  79.    
  80.     //declare variables in js with the keyword let
  81.     let valid = true;
  82.        
  83.     // validate the first name data
  84.     let fname_element = document.getElementById('fname');
  85.  
  86.     // retrieves the input object with ID fname.
  87.     let fname_regex = /^[a-zA-Z'!-]{2,30}$/;
  88.     //matches all letters, apostrophes, exclamation, and hyphen characters
  89.  
  90.     if (!fname_regex.test(fname_element.value)){
  91.         fname_element.value = "";
  92.         fname_element.focus();
  93.         fname_element.style.backgroundColor = "#ff5555";
  94.         valid = false;
  95.     }
  96.  
  97.     // // An alternative approach is:
  98.     // if(!fname_regex.test(fname_element.value)){
  99.     //  // write a message directly onto the web page using the innerHTML property
  100.     //  var fn_err = document.getElementById('fname_err');
  101.     //  fn_err.innerHTML = "Only letters, !,' and - allowed.";     
  102.     //  valid = false;
  103.     // }
  104.  
  105.     //validate last name data
  106.     let lname_element = document.getElementById('lname');
  107.  
  108.     let lname_regex = /^[a-zA-Z!'-]{2,40}$/;
  109.  
  110.     if(!lname_regex.test(lname_element.value)){
  111.         lname_element.value="";
  112.         lname_element.focus();
  113.         lname_element.style.background ="#ff5555"
  114.         valid= false;
  115.     }
  116.  
  117.     //validate email data
  118.     let email_element = document.getElementById('email');
  119.  
  120.     let email_regex = /^[a-zA-Z0-9.]{2,30}@[a-zA-Z0-9.]{2,20}.[a-zA-Z]{2,4}$/;
  121.  
  122.     if(!email_regex.test(email_element.value)) {
  123.         email_element.value = "";
  124.         email_element.focus();
  125.         email_element.style.background = "#ff5555";
  126.         valid = false;
  127.     }
  128.    
  129.     //birth year validation
  130.     let birth_yr_element = document.getElementById('birth_yr');
  131.  
  132.     let birth_yr_regex = /^[0-9]{4}$/;
  133.  
  134.     if(!birth_yr_regex.test(birth_yr_element.value)){
  135.         birth_yr_element.value="";
  136.         birth_yr_element.focus();
  137.         birth_yr_element.style.background="#ff5555";
  138.         valid= false;
  139.     }
  140.    
  141.     return valid;
  142.    
  143. }
  144.  
  145.  
  146. // This function is used to remove the error messages from the page when the user resubmits the form... e.g. if a user makes an error with fname and lname and tries to correct them both, however the system finds that there is still an error with the last name, it is important that they send the user only the error message for the last name on the second try.  To accomplish this we simply clear all the errors each time the user attempts to submit the form and the validation code will reinsert any errors which were made on the subsequent submission.
  147.  
  148. function clearErrors(){
  149.     var errors = document.getElementsByClassName('error');
  150.     for(var i = 0; i < errors.length; i++){
  151.         errors[i].innerHTML = "";
  152.     }  
  153. }
  154.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!