---
title: "Validation"
group: form
---


<div class="card">
  <div class="card-header">Validation</div>
  <div class="card-body">
    <div class="form-container">
      <form id="form1" class="needs-validation" novalidate method="post">
        <input type="hidden" />
        <div class="form-group">
          <label>required</label>
          <input type="text" required class="form-control" />
        </div>
        <div class="form-group">
          <label>minlength=5, but not required</label>
          <input type="text" minlength="5" class="form-control" />
        </div>
        <div class="form-group">
          <label>type=email, not required</label>
          <input type="email" class="form-control" />
        </div>

        <div class="form-group">
          <label>number, not required</label>
          <input type="number" class="form-control" />
        </div>

        <div class="form-group">
          <label>number, min=100, not required</label>
          <input type="number" min="100" class="form-control" />
        </div>

        <div class="form-group">
          <label>number, min=100, required</label>
          <input type="number" min="100" required class="form-control" />
        </div>

        <div class="form-group">
          <label>required</label>
          <select required class="form-control">
            <option value="">-----</option>
            <option value="bd">Bangladesh</option>
            <option value="us">USA</option>
            <option value="ca">Canada</option>
          </select>
        </div>

        <div class="form-group inline-label">
          <p>required, min=2</p>
          <input id="ch1" type="checkbox" min="2" name="future" required data-pristine-min-message="Select at least 2" />
          <label for="ch1">Dhaka</label><br />
          <input id="ch2" type="checkbox" min="2" name="future" required data-pristine-min-message="Select at least 2" />
          <label for="ch2">Sylhet</label><br />
          <input id="ch3" type="checkbox" min="2" name="future" required data-pristine-min-message="Select at least 2" />
          <label for="ch3">Khulna</label>
        </div>

        <div class="form-group">
          <label>pattern=/^\d+\.\d{2}$/ (match decimal with 2 points), required</label>
          <input type="number" pattern="/^\d+\.\d{2}$/g" required class="form-control" />
        </div>

        <div class="form-group">
          <label>above field with custom message</label>
          <input type="number" pattern="/^\d+\.\d{2}$/g" required data-pristine-pattern-message="The value must have 2 decimal points" class="form-control" />
        </div>


        <div class="form-group">
          <input type="submit" value="Submit" class="btn" />
        </div>

      </form>
    </div>
  </div>
</div>