Static Mask Basic


<div class="row">
    <div class="col-xl-6">
        <div class="form-group">
            <label for="static-mask1">99-9999999</label>
            <input id="static-mask1" type="text" class="form-control" placeholder="">
        </div>
    </div>
    <div class="col-xl-6">
        <div class="form-group">
            <label for="static-mask2">aa-9999</label>
            <input id="static-mask2" type="text" class="form-control" placeholder="">
        </div>
    </div>
</div>

Alternate masks


    <div class="row">
    <div class="col-xl-6">
    <div class="form-group">
    <label for="alternate-masks1">["99.9", "X"]</label>
    <input id="alternate-masks1" type="text" class="form-control" placeholder="">
    </div>
    </div>
    <div class="col-xl-6">
    <div class="form-group">
    <label for="alternate-masks2">(99.9)|(X)</label>
    <input id="alternate-masks2" type="text" class="form-control" placeholder="">
    </div>
    </div>
    </div>

Dynamic Syntax


    <div class="row">
    <div class="col-xl-4">
    <div class="form-group">
    <label for="dynamic-syntax-1">9-a{1,3}9{1,3}</label>
    <input id="dynamic-syntax-1" type="text" class="form-control" placeholder="">
    </div>
    </div>
    <div class="col-xl-4">
    <div class="form-group">
    <label for="dynamic-syntax-2">aa-9{4}</label>
    <input id="dynamic-syntax-2" type="text" class="form-control" placeholder="">
    </div>
    </div>
    <div class="col-xl-4">
    <div class="form-group">
    <label for="dynamic-syntax-3">aa-9{1,4}</label>
    <input id="dynamic-syntax-3" type="text" class="form-control" placeholder="">
    </div>
    </div>
    </div>

Date


    <div class="row">
    <div class="col-xl-4">
    <div class="form-group">
    <label for="date">dd/mm/yyyy</label>
    <input id="date" type="text" class="form-control" placeholder="">
    </div>
    </div>
    <div class="col-xl-4">
    <div class="form-group">
    <label for="date2">99-99-9999</label>
    <input id="date2" type="text" class="form-control" placeholder="">
    </div>
    </div>
    <div class="col-xl-4">
    <div class="form-group">
    <label for="date3">99 December, 9999</label>
    <input id="date3" type="text" class="form-control" placeholder="">
    </div>
    </div>
    </div>

Email


    <label for="email">john@mail.com</label>
    <input type="text" class="form-control mb-4" id="email">

IP


    <label for="ip-add">192.198.1.1</label>
    <input type="text" class="form-control mb-4" id="ip-add">

Phone


    <label for="ph-number">(999) 999-9999</label>
    <input type="text" class="form-control mb-4" id="ph-number">

Currency


    <label for="currency">$999,9999,999.99</label>
    <input type="text" class="form-control mb-4" id="currency">

Methods

Repeat


    <div class="form-group">
    <label for="repeater">mask 9999999999</label>
    <input id="repeater" type="text" class="form-control" placeholder="">
    </div>

setvalue


    <div class="form-group">
    <label for="setVal">Value is set as test@mail.com</label>
    <input id="setVal" type="text" class="form-control" placeholder="">
    </div>

isComplete


    <div class="form-group">
    <input id="isComplete" type="text" class="form-control" placeholder="">
    <small id="isCompleteHelp" class="form-text" style="display: none; color: #2196f3;">The mask is already filled</small>
    </div>

OnComplete


    <div class="form-group">
    <input id="oncomplete" type="text" class="form-control" placeholder="">
    <small id="oncompleteHelp" class="form-text" style="display: none; color: #009688;">You have successfully completed the mask</small>
    </div>

On InComplete


    <div class="form-group">
    <input id="onincomplete" type="text" class="form-control" placeholder="">
    <small id="onincompleteHelp" class="form-text" style="display: none; color: #e2a03f;">Incomplete Input Field</small>
    </div>

On cleared


    <div class="form-group">
    <input id="oncleared" type="text" class="form-control" placeholder="">
    <small id="onclearedHelp" class="form-text" style="display: none; color: #e7515a;">Plese fill out the field</small>
    </div>

Copyright © 2026 DesignReset, All rights reserved.

Coded with