Article Categories

Selected Reading

How to add form validation for empty input fields with JavaScript?

Javascript Web Development Object Oriented Programming

Form validation ensures users provide required information before submitting. JavaScript allows client-side validation to check for empty input fields and provide immediate feedback.

Basic Empty Field Validation

Here's a complete example that validates empty input fields:

<!DOCTYPE html>
<html>
<head>
    <title>Form Validation Example</title>
</head>
<body>
    <h1>JavaScript Empty Input Field Validation</h1>
    <form name="Form1" onsubmit="return emptyValidation()">
        Name: <input type="text" name="firstName" />
        <br><br>
        <input type="submit" value="Submit" />
    </form>

    <script>
        function emptyValidation() {
            var formField = document.forms["Form1"]["firstName"].value;
            if (formField == "" || formField == null) {
                alert("Name must be filled out");
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

Multiple Field Validation

For forms with multiple required fields, validate each one:

<!DOCTYPE html>
<html>
<body>
    <form name="registrationForm" onsubmit="return validateForm()">
        Name: <input type="text" name="name" /><br><br>
        Email: <input type="email" name="email" /><br><br>
        Phone: <input type="text" name="phone" /><br><br>
        <input type="submit" value="Register" />
    </form>

    <script>
        function validateForm() {
            var name = document.forms["registrationForm"]["name"].value;
            var email = document.forms["registrationForm"]["email"].value;
            var phone = document.forms["registrationForm"]["phone"].value;

            if (name == "") {
                alert("Name is required");
                return false;
            }
            if (email == "") {
                alert("Email is required");
                return false;
            }
            if (phone == "") {
                alert("Phone number is required");
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

Modern Approach with Error Messages

Instead of alerts, display error messages directly on the page:

<!DOCTYPE html>
<html>
<body>
    <form id="userForm">
        <div>
            <label>Name:</label>
            <input type="text" id="name" />
            <span id="nameError" style="color: red;"></span>
        </div><br>
        
        <div>
            <label>Email:</label>
            <input type="email" id="email" />
            <span id="emailError" style="color: red;"></span>
        </div><br>
        
        <button type="button" onclick="validateAndSubmit()">Submit</button>
    </form>

    <script>
        function validateAndSubmit() {
            clearErrors();
            
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            var isValid = true;

            if (name.trim() === "") {
                document.getElementById("nameError").innerText = "Name is required";
                isValid = false;
            }

            if (email.trim() === "") {
                document.getElementById("emailError").innerText = "Email is required";
                isValid = false;
            }

            if (isValid) {
                alert("Form submitted successfully!");
            }
        }

        function clearErrors() {
            document.getElementById("nameError").innerText = "";
            document.getElementById("emailError").innerText = "";
        }
    </script>
</body>
</html>

Key Validation Techniques

Method	Pros	Cons
Alert boxes	Simple, immediate feedback	Disruptive user experience
Inline error messages	Better UX, non-intrusive	Requires more HTML/CSS
Form onsubmit event	Validates before submission	Only checks on submit

Best Practices

Use trim() to remove whitespace
Check for both empty strings and null values
Return false from validation function to prevent form submission
Provide clear, specific error messages
Consider real-time validation on input events

Conclusion

JavaScript form validation for empty fields prevents incomplete submissions and improves user experience. Use inline error messages for better UX than alert boxes.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next