signup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="signup.css">
    <title>Sign Up</title>
</head>
<body>
<form id="signupForm" action="index.html" onsubmit="return validateForm()">
    <div class="container">
        <h1>Sign Up</h1>
        <p>Please fill in this form to create an account.</p>
        <hr>
  
        <label for="email"><b>Email</b></label>
        <input type="email" id="email" placeholder="Enter Email" name="email" required>
  
        <label for="psw"><b>Password</b></label>
        <input type="password" id="password" placeholder="Enter Password" name="psw" required>
  
        <label for="psw-repeat"><b>Confirm Password</b></label>
        <input type="password" id="confirmPassword" placeholder="Confirm Password" name="psw-repeat" required>
  
        
        <label>
            <input type="checkbox" checked="checked" name="remember"> Remember me
        </label>
  
        <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
        <p>Already a member? <a href="login.html">Login</a></p>
      
        <div class="clearfix">
            <button type="submit" class="signupbtn">Sign Up</button>
        </div>
    </div>
</form>

<script>
    function validateForm() {
        var email = document.getElementById("email").value;
        var password = document.getElementById("password").value;
        var confirmPassword = document.getElementById("confirmPassword").value;
        var passwordError = document.getElementById("passwordError");
        var emailError = document.getElementById("emailError");
        var passwordLengthError = document.getElementById("passwordLengthError");

        // Check if passwords match
        if (password !== confirmPassword) {
          alert("Passwords do not match");
          event.preventDefault(); // Prevent form submission
          return;
        } 

        // Check email format
        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
          alert("Invalid email format");
           event.preventDefault(); // Prevent form submission
           return;
        }

        // Check password length
        if (password.length < 8) {
           alert("Password should have atleast 8 character");
          event.preventDefault();
          return;
        }
        var symbolRegex = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/;
        if (!symbolRegex.test(password)) {
          alert("Password should have atleast 1 symbol");
          event.preventDefault();
          return;
        }
        
        var capitalLetterRegex = /[A-Z]/;
        if(!capitalLetterRegex.test(password)) {
          alert("Password should have atleast one capital letter");
          event.preventDefault();
          return;
        }
        return true; // Form submission allowed
    }
</script>
</body>
</html>