password example

HTML

<script src="http://lancevo.github.io/smartform/js/smartform.js"></script>
<form>


      
        <input id="password" type="text" required name="password" data-pattern-size="^.{8,15}$" data-pattern-uppercase="[A-Z]" data-pattern-lowercase="[a-z]" data-pattern-digit="[0-9]" data-pattern-allow-chars="[!@#$%^&()]" data-pattern-notallow-chars="^[^\=\\/\[\]:;\|=,\+\*\?<>]+[\S]+$">
        
            <ul class="validation">
                <li class="pattern-size">Must be 8-15 characters in length</li>
                <li class="pattern-uppercase">Must contain at least one <b>uppercase</b> letter</li>
                <li class="pattern-lowercase">Must contain at least one <b>lowercase</b> letter</li>
                <li class="pattern-digit">Must contain at least one <b>number</b>

                </li>
                <li class="pattern-allow-chars">Must contain at least one <b>character</b> ! @ # $ % ^ &amp; ( )</li>
                <li class="pattern-notallow-chars">These characters are <b>not</b> allowed:
                    <br/>" \ / [ ] : ; | = , + * ?</li>
            </ul>
  
        </div>

 

</form>

CSS

.focus .focus, .visited .visited, .required .required, .checked .checked, .not-checked .not-checked, .matched .matched, .not-matched .not-matched, .pattern-valid .pattern-valid, .pattern-invalid .pattern-invalid, .submit-invalid .submit-invalid {
    display:block;
}


.validation {
    display:block;
    list-style:none;
    padding-left:0;
}
.validation li:before {
    content:"\2610";
    font-size: 15px;
    line-height: 6px;
}
.pattern-uppercase-valid .pattern-uppercase:before, .pattern-lowercase-valid .pattern-lowercase:before, .pattern-digit-valid .pattern-digit:before, .pattern-symbol-valid .pattern-symbol:before, .pattern-nospace-valid .pattern-nospace:before, .pattern-size-valid .pattern-size:before, .pattern-allow-chars-valid .pattern-allow-chars:before, .pattern-notallow-chars-valid .pattern-notallow-chars:before {
    content:"\2611";
    font-size: 15px;
    line-height: 6px;
}

JavaScript

$().ready(function () {
    $("form").smartform();
});