Bootstrap Validator Example

Example 1: form validation javascript bootstrap

<script>           // Example starter JavaScript for disabling form submissions if there are invalid fields           (function() {             'use strict';             window.addEventListener('load', function() {               // Fetch all the forms we want to apply custom Bootstrap validation styles to               var forms = document.getElementsByClassName('needs-validation');               // Loop over them and prevent submission               var validation = Array.prototype.filter.call(forms, function(form) {                 form.addEventListener('submit', function(event) {                   if (form.checkValidity() === false) {                     event.preventDefault();                     event.stopPropagation();                   }                   form.classList.add('was-validated');                 }, false);               });             }, false);           })();           </script>

Example 2: bootstrap input field validation

<form>   <div class="form-row">     <div class="col-md-4 mb-3">       <label for="validationServer01">First name</label>       <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>       <div class="valid-feedback">         Looks good!       </div>     </div>     <div class="col-md-4 mb-3">       <label for="validationServer02">Last name</label>       <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>       <div class="valid-feedback">         Looks good!       </div>     </div>     <div class="col-md-4 mb-3">       <label for="validationServerUsername">Username</label>       <div class="input-group">         <div class="input-group-prepend">           <span class="input-group-text" id="inputGroupPrepend3">@</span>         </div>         <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>         <div class="invalid-feedback">           Please choose a username.         </div>       </div>     </div>   </div>   <div class="form-row">     <div class="col-md-6 mb-3">       <label for="validationServer03">City</label>       <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>       <div class="invalid-feedback">         Please provide a valid city.       </div>     </div>     <div class="col-md-3 mb-3">       <label for="validationServer04">State</label>       <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>       <div class="invalid-feedback">         Please provide a valid state.       </div>     </div>     <div class="col-md-3 mb-3">       <label for="validationServer05">Zip</label>       <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>       <div class="invalid-feedback">         Please provide a valid zip.       </div>     </div>   </div>   <div class="form-group">     <div class="form-check">       <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>       <label class="form-check-label" for="invalidCheck3">         Agree to terms and conditions       </label>       <div class="invalid-feedback">         You must agree before submitting.       </div>     </div>   </div>   <button class="btn btn-primary" type="submit">Submit form</button> </form>