Input Masks

Official documentation

For more detailed information and examples, see the official documentation: Input Masks documentation.

How to use?

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="../../assets/vendor/jquery-mask-plugin/dist/jquery.mask.min.js"></script>

Basic example

Result
HTML

Primary phone

Int'l phone

Money

Credit card

Date

IP address

Hour

Date & time

Mixed

Zip

CPF

CNPJ

Percent

Selected on focus

<!-- Input Masks -->
<form action="/">
  <!-- Primary Phone -->
  <div class="form-group input-group-merge mb-3">
    <label class="d-block small text-muted mb-1" for="primaryPhone">Primary phone</label>

    <div class="input-group">
      <input type="tel" id="primaryPhone" class="form-control form-control-append-icon" placeholder="+x(xxx)xxx-xx-xx"
             data-mask="+0(000)000-00-00">

      <div class="input-group-append-merge">
        <i class="nova-check-box icon-text text-secondary"></i>
      </div>
    </div>
  </div>
  <!-- End Primary Phone -->

  <!-- Int'l Phone -->
  <div class="form-group mb-3">
    <label class="d-block small text-muted mb-1" for="secondaryPhone">Int'l phone</label>
    <input type="text" id="secondaryPhone" class="form-control" placeholder="+33 xxx xxx xxx"
      data-mask="+33 000 000 000">
  </div>
  <!-- End Int'l Phone -->

  <!-- Money -->
  <div class="form-group mb-3">
    <label class="d-block small text-muted mb-1" for="money">Money</label>
    <input type="text" id="money" class="form-control" placeholder="$ x,xxx.xx"
      data-mask="$ #,##0.00">
  </div>
  <!-- End Money -->

  <!-- Credit Card -->
  <div class="form-group mb-3">
    <label class="d-block small text-muted mb-1" for="creditCard">Credit card</label>
    <input type="text" id="creditCard" class="form-control" placeholder="xxxx xxxx xxxx xxxx"
      data-mask="0000 0000 0000 0000">
  </div>
  <!-- End Credit Card -->

  <!-- Date -->
    <div class="form-group mb-3">
      <label class="d-block small text-muted mb-1" for="date">Date</label>

      <input id="date" type="text" class="form-control"placeholder="xx/xx/xxxx"
             data-mask="00/00/0000">
    </div>
  <!-- End Date -->

  <!-- IP -->
  <div class="form-group mb-3">
    <label class="d-block small text-muted mb-1" for="ip">IP address</label>
    <input type="text" id="ip" class="form-control" placeholder="131.123.31.133"
      data-mask="099.099.099.099">
  </div>
  <!-- End IP -->

  <!-- Hour -->
    <div class="form-group mb-3">
      <label class="d-block small text-muted mb-1" for="hour">Hour</label>

      <input id="hour" type="text" class="form-control" placeholder="xx:xx:xx"
             data-mask="00:00:00">
    </div>
  <!-- End Hour -->

  <!-- Date & Time -->
    <div class="form-group mb-3">
      <label class="d-block small text-muted mb-1" for="hour">Date & time</label>

      <input type="text" class="form-control" placeholder="xx/xx/xxxx xx:xx:xx"
             data-mask="00/00/0000 00:00:00">
    </div>
  <!-- End Date & Time -->

  <!-- Mixed -->
  <div class="form-group mb-3">
    <label class="d-block small text-muted mb-1" for="mixed">Mixed</label>
    <input type="text" id="mixed" class="form-control" placeholder="AAA 000-S0S"
           data-mask="AAA 000-S0S">
  </div>
  <!-- End Mixed -->

  <!-- Zip -->
  <div class="form-group mb-3">
    <label class="d-block small text-muted mb-1" for="zip">Zip</label>
    <input type="text" id="zip" class="form-control" placeholder="x-xx-xx-xx"
           data-mask="0-00-00-00">
  </div>
  <!-- End Zip -->

  <!-- CPF -->
  <div class="mb-3">
    <label class="d-block small text-muted mb-1" for="cpf">CPF</label>
    <input type="text" id="cpf" class="form-control" placeholder="xxx.xxx.xxx-xx"
           data-mask="000.000.000-00">
  </div>
  <!-- End CPF -->

  <!-- CNPJ -->
  <div class="mb-3">
    <label class="d-block small text-muted mb-1" for="cnpj">CNPJ</label>
    <input type="text" id="cnpj" class="form-control" placeholder="xx.xxx.xxx/xxxx-xx"
           data-mask="00.000.000/0000-00">
  </div>
  <!-- End CNPJ -->

  <!-- Percent -->
  <div class="mb-3">
    <label class="d-block small text-muted mb-1" for="percent">Percent</label>
    <input type="text" id="percent" class="form-control" placeholder="##x,xx%"
           data-mask="##0,00%">
  </div>
  <!-- End Percent -->

  <!-- Selected On Focus -->
  <div class="mb-3">
    <label class="d-block small text-muted mb-1" for="selected-on-focus">Selected on focus</label>
    <input type="text" id="selected-on-focus" class="form-control" placeholder="xx/xx/xxxx"
           data-mask="00/00/0000"
           data-mask-selectonfocus="true">
  </div>

</form>
<!-- End Input Masks -->

Autoclear

Use data-mask-clearifnotmatch="true"

Result
HTML

Autoclear

<!-- Autoclear -->
<div class="form-group">
  <label class="d-block small text-muted mb-1">Autoclear</label>
  <input type="text" class="form-control" placeholder="xxxx xxxx xxxx xxxx"
    data-mask="0000 0000 0000 0000"
    data-mask-clearifnotmatch="true">
</div>
<!-- End Autoclear -->

Custom pattern

Product Key

<!-- Product Key -->
<div class="form-group">
  <label class="d-block small text-muted mb-1" for="productKey">Product Key</label>
  <input type="text" id="productKey" class="form-control">
</div>
<!--  End Product Key -->

<script>
   $(document).on('ready', function () {
     // initialization of input mask
     $('#productKey').mask('A-**-000-a000', {
        placeholder: 'A-**-000-a000',
        translation: {
          '*': {pattern: /[A-Za-z0-9]/}
        }
      });
   });
</script>

Complite handle

<!-- Complite Handle -->
<div class="form-group">
  <label class="d-block small text-muted mb-1" for="compliteHandle">Complite handle</label>
  <input type="text" id="compliteHandle" class="form-control">
</div>
<!-- End Complite Handle -->

<script>
   $(document).on('ready', function () {
     // initialization of input mask
     $('#compliteHandle').mask('+0 (000) 000 00 00', {
       placeholder: '+x (xxx) xxx xx xx',
       onComplete: function(phone) {
         alert('Phone Completed!: ' + phone);
       }
      });
   });
</script>

<!-- Modal Toggle -->
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#exampleModal">
  Open modal
</button>
<!-- End Modal Toggle -->

<!-- Tags Input Modal -->
<div class="modal fade" id="exampleModal" tabindex="1" role="dialog"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- Int'l Phone -->
        <div class="form-group mb-3">
          <label class="d-block small text-muted mb-1" for="secondaryPhone">Int'l phone</label>
          <input type="text" id="secondaryPhone" class="form-control" placeholder="+33 xxx xxx xxx"
            data-mask="+33 000 000 000">
        </div>
        <!-- End Int'l Phone -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- End Tags Input Modal -->

Validation states

For more inforamation about form validation your can read on Validation page

Result
HTML

Required field

<div class="u-has-success">
  <div class="form-group">
    <input type="text" id="secondaryPhone" class="form-control" placeholder="+33 xxx xxx xxx"
      data-mask="+33 000 000 000">
    <small class="text-success">Required field</small>
  </div>
</div>

Result
HTML

Required field

<div class="u-has-error">
  <div class="form-group">
    <input type="text" id="secondaryPhone" class="form-control" placeholder="+33 xxx xxx xxx"
      data-mask="+33 000 000 000">
    <small class="text-danger">Required field</small>
  </div>
</div>