JS-P2-FormValidation/index.html at main · NameAlamin/JS-P2-FormValidation · 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
127
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Form Validation</title>
    <link rel="stylesheet" href="/css/style.css">
    <script>
        function myFun() {
            var name = document.getElementById('id_name');
            var phone = document.getElementById('id_phone');
            var email = document.getElementById('id_email');
            var password = document.getElementById('id_password');
            var repassword = document.getElementById('id_re_password');
            if (name.value == "") {
                document.getElementById('id-name-error-message').innerHTML = "Please Enter Your Name";
                name.focus();
                return false;
            }else if(name.value.length < 5){
                document.getElementById('id-name-error-message').innerHTML = "Please Enter Minimum 5 Charecter";
                name.focus();
                return false;
            }else if(name.value.length > 10){
                document.getElementById('id-name-error-message').innerHTML = "Please Enter Maximum 10 Charecter";
                name.focus();
                return false;
            } else {
                document.getElementById('id-name-error-message').innerHTML = "";
            }

            if (phone.value == '') {
                document.getElementById('id-phone-error-message').innerHTML = "Please Enter Your Phone Number";
                phone.focus();
                return false;
            } else {
                document.getElementById('id-phone-error-message').innerHTML = "";
            }

            if (email.value == '') {
                document.getElementById('id-email-error-message').innerHTML = "Please Enter Your Email";
                email.focus();
                return false;
            } else {
                document.getElementById('id-email-error-message').innerHTML = "";
            }

            if (password.value == '') {
                document.getElementById('id-password-error-message').innerHTML = "Please Enter Your Password";
                password.focus();
                return false;
            }else {
                document.getElementById('id-password-error-message').innerHTML = "";
            }

            if (repassword.value == '') {
                document.getElementById('id-repassword-error-message').innerHTML = "Please Enter Your Password Again";
                repassword.focus();
                return false;
            }else if(password.value != repassword.value){
                document.getElementById('id-repassword-error-message').innerHTML = "Your Password Didn't Match";
                repassword.focus();
                return false;
            } else {
                document.getElementById('id-repassword-error-message').innerHTML = "";
            }
        }
    </script>
</head>

<body>
    <div class="content">
        <div class="wrapper">
            <h1>Form Validation</h1>
            <form>
                <table width="400" border="0" cellpadding="0" cellspacing="10" align="center">
                    <tr>
                        <td>
                            <label for="name">Name<span class="star">*</span></label><br>
                            <input type="text" class="input-fild" id="id_name" placeholder="Enter Your Name"><br>
                            <div class="error-message" id="id-name-error-message"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="phone">Phone<span class="star">*</span></label><br>
                            <input type="number" class="input-fild" id="id_phone"
                                placeholder="Enter Your Phone Number"><br>
                            <div class="error-message" id="id-phone-error-message"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="email">Email</label><br>
                            <input type="email" class="input-fild" id="id_email" placeholder="Enter Your Email"><br>
                            <div class="error-message" id="id-email-error-message"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="pass">Password</label><br>
                            <input type="password" class="input-fild" id="id_password"
                                placeholder="Enter Your Password"><br>
                            <div class="error-message" id="id-password-error-message"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="repass">Re Password</label><br>
                            <input type="password" class="input-fild" id="id_re_password"
                                placeholder="Enter Re Password"><br>
                            <div class="error-message" id="id-repassword-error-message"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="submit" name="submit" onclick="return myFun();" class="btn" value="SEND">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</body>

</html>