Forms

Validation

jQuery Validate makes simple clientside form validation easy.

Requirements

<script src="js/vendor/jquery.validate/jquery.validate.min.js"></script>
<script src="js/vendor/jquery.validate/additional-methods.min.js"></script>

Example

Javascript
jQuery('#exampleForm').validate();
Html
<form id="exampleForm" class="tooltip-label-end" novalidate>
  <div class="mb-3 position-relative form-group">
    <label class="form-label">Name</label>
    <input type="text" class="form-control" name="basicValidationName" required />
  </div>
  <div class="mb-3 position-relative form-group">
    <label class="form-label">Age</label>
    <input type="number" class="form-control" name="basicValidationAge" required />
  </div>
  <div class="mb-3 position-relative form-group">
    <label class="form-label">Details</label>
    <textarea class="form-control" rows="2" name="basicValidationDetail" required></textarea>
  </div>
  <div class="mb-3 position-relative form-group">
    <label class="form-label">Radio</label>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="basicValidationRadioButton" id="basicValidationCustomRadio1" required />
      <label class="form-check-label" for="basicValidationCustomRadio1">Radio First</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="basicValidationRadioButton" id="basicValidationCustomRadio2" required />
      <label class="form-check-label" for="basicValidationCustomRadio2">Radio Second</label>
    </div>
  </div>
  <div class="mb-3 position-relative form-group">
    <label class="form-label">Check</label>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="basicValidationCheckbox" id="basicValidationCustomCheck1" required />
      <label class="form-check-label" for="basicValidationCustomCheck1">Checkbox First</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="basicValidationCheckbox" id="basicValidationCustomCheck2" required />
      <label class="form-check-label" for="basicValidationCustomCheck2">Checkbox Second</label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary mb-0">Submit</button>
</form>

More Examples

You may find more examples in Interface.Forms.Validation.html file which is initialized by js/forms/validation.js.

Documentation