javascriptprogram_01/JS_program_04.html at main · RaghulS02/javascriptprogram_01 · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .error{
            color: red;
            font-size: 15px;
        }
         body {
        font-family: Arial, sans-serif;
        text-align: center;
        margin-top: 50px;
        background-color: rgb(1, 218, 247);
      }
      input,
      select,
      button {
        padding: 10px;
        margin: 10px;
        font-size: 16px;

        color: rgb(5, 61, 247);
      }
      button:hover{
        background-color: black;
        color: aliceblue;
      }
      fieldset{
        background-color: rgb(110, 238, 238);
       margin-left: 40%;
       margin-right: 30%;background-color: rgb(85, 224, 224);
       box-shadow: 1px 1px 4px 9px rgb(97, 165, 165);
      }
    </style>
</head>
<body>
    <fieldset>
    <h2>Registration Form</h2>
    <form id="registrationForm" onsubmit="return validateForm()">
        <label for="name">Name:</label><br>
        <input type="text" name="name" id="name" required>
        <div id="nameError" class="error"></div>
        <br><br>

        <label for="email">Email:</label><br>
        <input type="email" name="email" id="email" required>
        <div id="emailError" class="error"></div>
        <br><br>

        <label for="password">Password:</label><br>
        <input type="password" name="password" id="password" required>
        <div id="passwordError" class="error"></div>
        <br><br>

        <label for="phone">Phone Number:</label><br>
        <input type="text" name="phone" id="phone" required>
        <div id="phoneError" class="error"></div>
        <br><br>

        <button type="submit">Submit</button>
      </fieldset>
        <script >
            function validateName(name){
    const regex = /^[A-Za-z\s]+$/;
    if(name.trim() === ""){
        return "Name cannot be empty";
    }
    if (!regex.test(name)){
        return "Name can only conatain letters and spaces";
    }
    return"Name is valid";
}

function validateEmail(email){
    const regex = /^[a-zA-Z0-9.%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if(email.trim() === ""){
        return "Email cannot be empty";
    }
    if (!regex.test(email)){
        return "Inavalid email format";
    }
    return"Email is valid";
}

function validatePassword(password){
    const regex = /^(?=.*[A-Z])(?=.*\d).{8,}$/;
    if(password.trim() === ""){
        return "Password cannot be empty";
    }
    if (!regex.test(password)){
        return "Password must be at least 8 characters long,contains an uppercase letter,and a number";
    }
    return"Password is valid";
}

function validatePhone(phone){
    const regex = /^[0-9]{10}$/;
    if(phone.trim() === ""){
        return "Phone number cannot be empty";
    }
    if (!regex.test(phone)){
        return "Phone number must be 10 digits long";
    }
    return" Phone Number is valid";
}

function validateForm(){
    const name = document.getElementById("name").value;
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    const phone = document.getElementById("phone").value;

    const nameError = validateName(name);
    const emailError = validateEmail(email);
    const passwordError = validatePassword(password);
    const phoneError = validatePhone(phone);

    if (nameError === "Name is valid" && emailError === "Email is valid" && passwordError ==="Password is valid" && phoneError === "Phone Number is valid") {
        return true;
    }

    document.getElementById("nameError").innerText = nameError === "Name is valid" ? "":nameError;
    document.getElementById("emailError").innerText = emailError === "Email is valid" ? "":emailError;
    document.getElementById("passwordError").innerText = passwordError === "Password is valid" ? "":passwordError;
    document.getElementById("phoneError").innerText = phoneError === "Phone Number is valid" ? "":phoneError;

    return false;
}
        </script>
    </form>
</body>
</html>