learnSQL/main.ejs at main · kishankumar07/learnSQL · 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sign Up Form by Colorlib</title>

    <!-- Font Icon -->
    <link rel="stylesheet" href="/userAssets/signupAssets/fonts/material-icon/css/material-design-iconic-font.min.css">

    <!-- Main css -->
    <link rel="stylesheet" href="/userAssets/signupAssets/css/style.css">
    <style>
        .error {
            color: red;
            font-size: 0.9em;
        }
    </style>
</head>
<body>

    <div class="main">

        <!-- Sign up form -->
        <section class="signup">
            <div class="container">
                <div class="signup-content">
                    <div class="signup-form">
                        <h2 class="form-title">Sign up</h2>
                        <form  action="/register" method="POST" class="register-form" id="register-form" onsubmit="return validationForm()">
                            <div class="form-group">
                                <label for="name"><i class="zmdi zmdi-account material-icons-name"></i></label>
                                <input type="text" name="name" id="name" placeholder="Your Name"/>
                                <div id="name-error" class="error"></div>
                            </div>
                            <div class="form-group">
                                <label for="email"><i class="zmdi zmdi-email"></i></label>
                                <input type="email" name="email" id="email" placeholder="Your Email"/>
                                <div id="email-error" class="error"></div>
                            </div>
                            <div class="form-group">
                                <label for="mobile"><i class="zmdi zmdi-mobile"></i></label>
                                <input type="number" name="mobile" id="mobile" placeholder="Your phone"/>
                                <div id="mobile-error" class="error"></div>
                            </div>
                            <div class="form-group">
                                <label for="pass"><i class="zmdi zmdi-lock"></i></label>
                                <input type="password" name="password" id="password" placeholder="Password"/>
                                <div id="password-error" class="error"></div>
                            </div>
                             <div class="form-group">
                                <label for="re-pass"><i class="zmdi zmdi-lock-outline"></i></label>
                                <input type="password" name="confirmPassword" id="re_pass" placeholder="Repeat your password"/>
                            </div>
                            <div class="form-group">
                                <input type="checkbox" name="agree-term" id="agree-term" class="agree-term" />
                                <label for="agree-term" class="label-agree-term"><span><span></span></span>I agree all statements in  <a href="#" class="term-service">Terms of service</a></label>
                            </div>
                            <div class="form-group form-button">
                                <input type="submit" name="signup" id="signup" class="form-submit" value="Register"/>
                            </div>
                        </form>


                    </div>
                    <div class="signup-image">
                        <figure><img src="/userAssets/signupAssets/images/signup-image.jpg" alt="sing up image"></figure>
                        <a href="/login" class="signup-image-link">I am already member</a>
                    </div>
                </div>
            </div>
        </section>


    </div>


    <script>
        function validationForm() {
            let isValid = true;

            // Name validation
            const name = document.getElementById('name').value;
            console.log("name:",name);
            if (name === '') {
                isValid = false;
                document.getElementById('name-error').textContent = 'Name is required.';
            } else {
                document.getElementById('name-error').textContent = '';
            }

            // Email validation
            const email = document.getElementById('email').value;
            console.log("email");
            const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
            if (email === '') {
                isValid = false;
                document.getElementById('email-error').textContent = 'Email is required.';
            } else if (!emailPattern.test(email)) {
                isValid = false;
                document.getElementById('email-error').textContent = 'Invalid email format.';
            } else {
                document.getElementById('email-error').textContent = '';
            }

            // Mobile validation
            const mobile = document.getElementById('mobile').value;
            if (mobile === '') {
                isValid = false;
                document.getElementById('mobile-error').textContent = 'Mobile number is required.';
            } else if (mobile.length < 10) {
                isValid = false;
                document.getElementById('mobile-error').textContent = 'Mobile number should be at least 10 digits.';
            } else {
                document.getElementById('mobile-error').textContent = '';
            }

            // Password validation
            const password = document.getElementById('pass').value;
            if (password === '') {
                isValid = false;
                document.getElementById('password-error').textContent = 'Password is required.';
            } else if (password.length < 6) {
                isValid = false;
                document.getElementById('password-error').textContent = 'Password should be at least 6 characters.';
            } else {
                document.getElementById('password-error').textContent = '';
            }

            // Terms and conditions validation
            const terms = document.getElementById('agree-term').checked;
            if (!terms) {
                isValid = false;
                document.getElementById('terms-error').textContent = 'You must agree to the terms and conditions.';
            } else {
                document.getElementById('terms-error').textContent = '';
            }

            return isValid;
        }
    </script>


    <!-- JS -->
    <script src="/userAssets/signupAssets/vendor/jquery/jquery.min.js"></script>
    <script src="/userAssets/signupAssets/js/main.js"></script>
</body><!-- This templates was made by Colorlib (https://colorlib.com) -->
</html>