Form Validation

Valid Feedback
Show Code
Looks good!
Looks good!
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.
                    
        <!-- Form -->
        <form class="needs-validation" novalidate<
        <div class="form-row"<
        <div class="col-md-6 mb-3"<
        <label for="validationCustom01"<First name</label<
        <input type="text" class="form-control mt-2" id="validationCustom01" value="Mark" required<
        <div class="valid-feedback"<
        Looks good!
        </div<
        </div<
        <div class="col-md-6 mb-3"<
        <label for="validationCustom02"<Last name</label<
        <input type="text" class="form-control mt-2" id="validationCustom02" value="Otto" required<
        <div class="valid-feedback"<
        Looks good!
        </div<
        </div<
        </div<
        <div class="form-row"<
        <div class="col-md-6 mb-3"<
        <label for="validationCustom03"<City</label<
        <input type="text" class="form-control mt-2" id="validationCustom03" required<
        <div class="invalid-feedback"<
        Please provide a valid city.
        </div<
        </div<
        <div class="col-md-3 mb-3"<
        <label for="validationCustom04"<State</label<
        <select class="custom-select mt-2" id="validationCustom04" required<
        <option selected disabled value=""<Choose...</option<
        <option<...</option<
        </select<
        <div class="invalid-feedback"<
        Please select a valid state.
        </div<
        </div<
        <div class="col-md-3 mb-3"<
        <label for="validationCustom05"<Zip</label<
        <input type="text" class="form-control mt-2" id="validationCustom05" 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" type="checkbox" value="" id="invalidCheck" required<
        <label class="form-check-label" for="invalidCheck"<
        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<
                    
                    
        <!-- Script -->
        <script>
        (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>