Edit these docs

Form validation

eCommerce form validation

Form validation dedicated to building eCommerce projects.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting. 


        <form class="needs-validation" novalidate>
          <div class="form-row">
            <div class="col-md-4">
              <div class="md-form md-outline">
                <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark"
                required>
                <label for="validationCustom01">First name</label>
                <div class="valid-feedback">
                  Looks good!
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="md-form md-outline">
                <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto"
                required>
                <label for="validationCustom02">Last name</label>
                <div class="valid-feedback">
                  Looks good!
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="md-form md-outline input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="inputGroupPrepend">@</span>
                </div>
                <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
                <div class="invalid-feedback">
                  Please choose a username.
                </div>
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="col-md-6">
              <div class="md-form md-outline">
                <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
                <label for="validationCustom03">City</label>
                <div class="invalid-feedback">
                  Please provide a valid city.
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="md-form md-outline">
                <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
                <label for="validationCustom04">State</label>
                <div class="invalid-feedback">
                  Please provide a valid state.
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="md-form md-outline">
                <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
                <label for="validationCustom05">Zip</label>
                <div class="invalid-feedback">
                  Please provide a valid zip.
                </div>  
              </div>
            </div>
          </div>
          <div class="form-group mt-2 mb-4">
            <div class="form-check pl-0">
              <input class="form-check-input filled-in" 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 btn-sm" type="submit">Submit form</button>
        </form>

      


        (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);
        })();