smartform/password.html at master · lancevo/smartform · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
    <title>smartform demo</title>

    <style>
        .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;
        }
        .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;
        }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="js/smartform.js"></script>

    <script>
        $(document).ready(function () {
            $("form").smartform();
        })
    </script>

</head>
<body>
<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="password" 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="password" 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 you entered does't match.</div>
        </div>
    </section>

</form>
</body>
</html>