API tools faq
paste
Advertisement
danine1

Form Validation

danine1
Apr 22nd, 2018
342
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.15 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.     <head>
  3.         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  4.     </head>
  5.     <body>
  6.      
  7.      
  8.     <div class="container">
  9.         <h1>Form Validation</h1>
  10.     <div class="row">
  11.         <div class="col">
  12.             <form>
  13.                 <div class="form-group row has-error">
  14.                     <label class="col-sm-2 col-form-label">Name</label>
  15.                     <div class="col-sm-10">
  16.                         <input type="text" class="form-control is-invalid" data-validate="name" placeholder="Name">
  17.                         <div class="invalid-feedback">
  18.                             Please provide a valid name.
  19.                         </div>
  20.                     </div>
  21.                 </div>
  22.                 <div class="form-group row">
  23.                     <label class="col-sm-2 col-form-label">Email</label>
  24.                     <div class="col-sm-10">
  25.                         <input type="text" class="form-control" data-validate="email" placeholder="Email">
  26.                     </div>
  27.                 </div>
  28.                 <div class="form-group row">
  29.                     <label class="col-sm-2 col-form-label">Age</label>
  30.                     <div class="col-sm-10">
  31.                         <input type="text" class="form-control" data-validate="age" placeholder="Age">
  32.                     </div>
  33.                 </div>
  34.                 <div class="form-group row">
  35.                     <div class="col-sm-10">
  36.                         <button type="submit" class="btn btn-primary">Sign in</button>
  37.                     </div>
  38.                 </div>
  39.             </form>
  40.         </div>
  41.         <div class="col">
  42.             <p>Your task is to create JavaScript + jQuery snippet for validation of inputs.</p>
  43.             <h3>Validation rules:</h3>
  44.             <ul>
  45.                 <li>Name has to be at least 3 letters</li>
  46.                 <li>Email has to contain '@'</li>
  47.                 <li>Age has to be a number greater than 13</li>
  48.             </ul>
  49.             <p> Hint: .length, indexOf(), isNaN() </p>
  50.         </div>
  51.     </div>
  52.     </div>
  53.     <script
  54.      src="https://code.jquery.com/jquery-3.2.1.min.js"
  55.      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  56.      crossorigin="anonymous"></script>
  57.  
  58.  
  59.      <script>
  60.         /*
  61.         Deconstruct problem
  62.         1) select input to listen for changes
  63.         2) get actual value of input
  64.         3) determine the type of validation
  65.         4) do the validation
  66.         5) show the results of validation (message, add / remove class)
  67.         */
  68.  
  69.         //1
  70.         $('input').keyup(function(){
  71.  
  72.             /*console.log($(this));*/
  73.  
  74.             //takes the input from user and puts it into the variable value using the function .val()
  75.             var value = $(this).val();//2
  76.             //gets the input from the attribute data-validate using the .data function | could also use:
  77.             //.attr('id') but not as good;
  78.             var validate = $(this).data('validate');//3
  79.  
  80.             //4
  81.             var valid = true;
  82.             if( validate == 'name'){
  83.  
  84.                 valid = value.length >= 3;
  85.             }else if (validate == 'email'){
  86.                 //fast way of checking if @ is in string - if not there it is not equal to -1
  87.                 valid = value.indexOf('@') != -1;
  88.             }else if ( validate == 'age'){
  89.                  valid = !isNan(value) && value >= 13;
  90.             }
  91.  
  92.             // add validation for email and age
  93.             // indexOf(), isNaN()
  94.  
  95.             //5
  96.             if(valid){
  97.                 $(this).removeClass('is-invalid');
  98.                 $(this).siblings('.invalid-feedback').remove();
  99.             }else{
  100.                 $(this).addClass('is-invalid');
  101.  
  102.                 if( $(this).siblings('.invalid-feedback').length == 0 ){
  103.  
  104.                 $(this).after('<div class="invalid-feedback">Please provide a valid name.</div>')
  105.             }
  106.         }
  107.  
  108.     });
  109.          
  110.  
  111.      </script>
  112.      
  113.     </body>
  114.     </html>
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!