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
<!-- 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"
<!-- 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 -->
<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
<!-- 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
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>
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>