password example

by lvo811

HTML

<script src="http://lancevo.github.io/smartform/js/smartform.js"></script>
<form>
    <section>
        <em> * Input fields type set to text for demo purpose. If you're going to use this, please make sure to change it to password. </em>

    </section>
    <section>
        <label>Password</label>
        <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]+$">
        <div class="sfm"> <b>Password requirements</b>

            <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>May contain a special character ! @ ^ &amp; ( ) $ % . #</div>
            <div class="required">This field is required</div>
            <div class="pattern-invalid">Password does not meet requirement</div>
        </div>
    </section>
    <section>
        <label>Verify Password</label>
        <input type="text" id="confirmpassword" name="confirmpassword"
               data-smartform-match="#password" required/>
        <div class="sfm"> 
            <div class="focus">Please re-enter the password</div>
            <div class="required">This field is required</div>
            <div class="not-matched">The password...

CSS

.sfm > * {
    display: none;
}
.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;
}
.sfm .pattern-invalid, .sfm .required, .sfm .not-matched {
    color:red;
}

.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;
}
section {
    margin-bottom: 20px;
    padding: 20px;
    width: 400px;
}
section:nth-child(odd) {
    background: #efefef;
}
label {
    display:block;
    font-weight:bold;
}

JavaScript

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