web_programming_course__/task2.html at main · ajasad25/web_programming_course__ · 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
<!DOCTYPE html>
<html>
<head>
<title>Signup Form</title>
<style>
    table, th, td {
      border: 1px solid black;width: 50; height: 50;
    }
</style>
<script>
    function validateForm() {
        // Fetching values from the form
        var username = document.getElementById("Username").value;
        var password = document.getElementById("Password").value;
        // You can similarly fetch other fields

        // Clear previous error messages
        document.getElementById("error").innerHTML = "";

        // Regular expressions for validation
        var usernameRegex = /^[a-zA-Z0-9_-]{3,16}$/;
        var passwordRegex = /^[a-zA-Z0-9!@#$%^&*()_+]{6,20}$/;
        // You can add more regex for other fields like email, phone number, etc.

        // Validation for username
        if (!usernameRegex.test(username)) {
            document.getElementById("error").innerHTML += "Invalid username. Username must be 3-16 characters and can contain letters, numbers, underscores, and hyphens.<br>";
        }

        // Validation for password
        if (!passwordRegex.test(password)) {
            document.getElementById("error").innerHTML += "Invalid password. Password must be 6-20 characters and can contain letters, numbers, and special characters (!@#$%^&*()_+).<br>";
        }

        // Return false if there are errors
        if (document.getElementById("error").innerHTML !== "") {
            return false;
        }
    }
</script>
</head>
<body>
<center>
    <form action="https://www.nu.edu.pk/" onsubmit="return validateForm()">
        <label for="Username">Username:</label>
        <input type="text" id="Username" name="Username" required><br><br>
        <label for="Password">Password:</label>
        <input type="password" id="Password" name="Password" required><br><br>
        <!-- Add more fields here -->
        <input type="submit" value="Submit">
    </form>
    <p id="error" style="color: red;"></p>
</center>
</body>
</html>