JS form validation

Prev Next

Form validation is crucial for ensuring that the data submitted by users is appropriate and secure. JavaScript provides a way to perform client-side validation, making the data processing faster and reducing the load on the server. This guide will cover basic form validation in JavaScript, including an example and email validation.

Importance of Form Validation

• User Input: Ensures that the data provided by users is appropriate and in the correct format.

• User Experience: Provides immediate feedback to users without needing to wait for a server response.

• Server Load: Validates data on the client side, reducing the amount of incorrect data sent to the server.

Example of JavaScript Form Validation

Here’s an example that validates a form with a name and password field. The name cannot be empty, and the password must be at least 6 characters long.

<script>
    function validateForm() {
        // Get the form fields
        var name = document.forms["myForm"]["name"].value;
        var password = document.forms["myForm"]["password"].value;

        // Validate name
        if (name == "") {
            alert("Name must be filled out");
            return false;
        }

        // Validate password
        if (password.length < 6) {
            alert("Password must be at least 6 characters long");
            return false;
        }

    return true;
    }
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()" method="post">
    Name: <input type="text" name="name"><br><br>
    Password: <input type="password" name="password"><br><br>
    <input type="submit" value="Submit">
</form>

Prev Next