How to add sign up validation using javascript-CodePudding

I have been given this code where I am asked to add validation function using Javascript. It is a sign up form whereupon submit, it should validate it by alerting a pop up message to the user if the First name, Last name, Username, or password is empty or if the password's character length is less than 8 characters. and if once the conditions are met, it will pop up a message that tells the user that the sign up is a success

<?php
    require "function.php";

    if($_SERVER['REQUEST_METHOD'] == "POST")
    {
        $username = addslashes($_POST['username']);
        $password = addslashes($_POST['password']);
        $date = date('Y-m-d H:i:s');
        $firstname = ($_POST['firstname']);
        $lastname = ($_POST['lastname']);


        $query = "insert into users (username,password,date,firstname,lastname) 
        values ('$username','$password','$date','$firstname','$lastname')";

        $result = mysqli_query($con,$query);

        header("Location: login.php");
        die;
    }
?>

<!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">
    <link rel="stylesheet" href="LogIn.css">
    
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">

    <title>Sign up</title>
</head>
<body>
    <nav> 
        <ul>
            <li><a href="home.php">Home</a></li>

            <a href="login.php"><button class = "button2"> <span class = "sign"> Login </button></a>
            <a href="signup.php"><button class = "button2"> <span > Sign Up</span></button></a>
        </ul>
    </nav>
    
    <div > 
        <div >
            <h2>Sign Up for Free</h2>
            <p>It's quick and easy</p>
            
            <form method="post" id = "form">
                <div class ="box">
                    <i >person</i>
                    <input type = "text" name = "firstname" placeholder = "First Name" id = "First_name" required>
                </div>
            
                <div class = "box">
                    <i >person</i>
                    <input type = "text" name = "lastname" placeholder = "Last Name" id = "Last_Name" required>
                </div>
            
                <div >
                    <i >account_circle</i>
                    <input type="text" name="username" placeholder="Your username" id = "User_name" required>
                </div>
            
                <div >
                    <i >lock</i>
                    <input type="password" name="password" placeholder="Your Password" id = "Password" required>
                </div>

                <input type="submit" id = "submit" value="Sign Up"></input>
           
            </form>

        </div>
    </div>
</body>
</html>

I have tried using If statements and comparing each fields value to null and for the password, and I compared the password field's value length if it is less than 8. But it doesn't work and whenever I click on submit

CodePudding user response：

In your form tag you will need to specify an onsubmit event, like

onsubmit="return validateForm();"

So, if your validateForm function returns true ("valid"), then the form is submitted and if it returns false, then the form is not submitted. Now, let's implement validateForm:

function validateForm() {
    let firstName = document.getElementById("First_name").value;
    let lastName = document.getElementById("Last_Name").value;
    let username = document.getElementById("User_name").value;
    let password = document.getElementById("Password").value;

    error = "";

    let isValid = (!!firstName);

    if (!isValid) error = "First name is empty";

    isValid = isValid && lastName;

    if ((!isValid) && (!error)) error = "Last name is empty";
    
    isValid = isValid && username;

    if ((!isValid) && (!error)) error = "Username is empty";

    isValid = isValid && password;

    if ((!isValid) && (!error)) error = "Password is empty";

    isValid = isValid && (password.length >= 8);

    if ((!isValid) && (!error)) error = "Password too short";

    if (isValid) alert("Validation succeeded");
    else alert(error);

    return isValid;
}