WebDevelopment-11AM/validations.html at master · utsav-cloud/WebDevelopment-11AM · 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<head>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
    <script>
        var userDetails = [
            { UserName:"john"},
            { UserName:"john12"},
            { UserName:"david"}
        ];
        function VerifyUser() {
            var lblName= document.getElementById("lblName");
            var username = document.getElementById("txtName").value;

            for(var i=0; i<userDetails.length; i++) {
                if(userDetails[i].UserName==username) {
                    lblName.className="text-danger";
                    lblName.innerHTML="User Name Taken - Try Another";
                    break;
                } else {
                    lblName.className="text-success";
                    lblName.innerHTML="User Name Available";
                }
            }

        }
        function VerifyPassword() {
            var regExp=/(?=.*[A-Z])\w{4,15}/;
            var pwd = document.getElementById("txtPwd").value;
            var msg = document.getElementById("msg");
            var grade = document.getElementById("grade");
            grade.style.display="block";
            document.getElementById("errorGroup").style.display="block";
            function ShowGrade(min, max, val, low, high){

                grade.min=min;
                grade.max=max;
                grade.value=val;
                grade.low=low;
                grade.high=high;
            }

            if(pwd.match(regExp)) {
                msg.innerHTML="Strong Password";
                ShowGrade(1,100,100,0,0);
            }else {
                if(pwd.length<4) {
                    msg.innerHTML="Poor Password";
                    ShowGrade(1,100,100,60,80);
                } else {
                    msg.innerHTML="Weak Password";
                    ShowGrade(1,100,100,40,80);
                }
            }

        }
        function VerifyCaps(event) {
            var warn = document.getElementById("warn");
            if(event.keyCode>=65 && event.keyCode<=90) {
                warn.innerHTML="Caps is ON";
            } else {
                warn.innerHTML="";
            }
        }
        function ConfirmPassword(){
            var pwd= document.getElementById("txtPwd").value;
            var confirmPwd = document.getElementById("txtConfirm").value;
            var lblConfirm = document.getElementById("lblConfirm");
            if(confirmPwd!=pwd) {
                lblConfirm.innerHTML="Password Mismatch";
            } else {
                lblConfirm.innerHTML="";
            }
        }
        function Hide(){
            document.getElementById("errorGroup").style.display="none";
        }
        function VerifyCity(city){
            var cityError = document.getElementById("cityError");
            if(city.value=="nocity") {
                cityError.innerHTML="Please Select Your City";
            } else {
                cityError.innerHTML="";
            }
        }
    </script>
</head>
<body>
    <div class="container">
        <h2>Register User</h2>
        <div class="form-group">
            <label>User Name</label>
            <div>
                <input onkeypress="VerifyCaps(event)" onkeyup="VerifyUser()" type="text" class="form-control" id="txtName">
                <span id="lblName"></span>
                <span id="warn"></span>
            </div>
        </div>
        <div class="form-group">
            <label>Password</label>
            <div>
                <input onblur="Hide()" onkeyup="VerifyPassword()" type="password" class="form-control" id="txtPwd">
                <div id="errorGroup">
                    <meter style="display: none;" id="grade" min="" max="" value="" low="" high="" class="form-control"></meter>
                    <span class="text-danger" id="msg"></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label>Confirm Password</label>
            <div>
                <input onkeyup="ConfirmPassword()" type="password" id="txtConfirm" class="form-control">
                <span id="lblConfirm"></span>
            </div>
        </div>
        <div class="form-group">
            <label>Select City</label>
            <div>
                <select id="lstCities" onchange="VerifyCity(this)" class="form-control">
                    <option value="nocity">Select a City</option>
                    <option value="Delhi">Delhi</option>
                    <option value="Hyd">Hyd</option>
                </select>
                <span id="cityError" class="text-danger"></span>
            </div>
        </div>
    </div>
</body>