Enhancing Web Forms: Data Validation with HTML5 and JavaScript

Form validation is a crucial aspect of web development that ensures accurate user data input, preventing errors and enhancing the overall user experience. In this guide, we’ll explore the types of data that should be validated and provide a concise overview of setting up validation using HTML5 functionality and JavaScript.

Forms have various jobs, from signing up for apps to other tasks. Consider the example of a contact form on your app’s sign-up page. This form is like a gatekeeper, ensuring that the details users provide are clean, correctly formatted, and safe from any potential issues. Just as you’d want the process of signing up to be smooth and secure, form validation plays a crucial role in making sure the information entered is accurate and protected, contributing to a seamless user experience.

Types of Data to Validate:

Validating user input is essential and may include:

• Format Validation:
  Email, address, phone number, zip code, name, and password fields.
• Value Validation:

Ensuring the entered value is valid for fields like country and date.

• Mandatory Field Validation:

Verifying mandatory fields to ensure essential information is provided.

• Setting up Validation with HTML5:

HTML5 offers several attributes to facilitate data validation. Common validation cases include:

Making Fields Required:

Utilize the ‘required’ attribute to indicate mandatory fields.
Constraining Data Length:

For text data, use ‘minlength’ and ‘maxlength’ attributes.
For numeric data, set ‘min’ and ‘max’ attributes.
When the input meets HTML5 validation criteria, it is assigned the pseudo-class ‘valid’; otherwise, it receives ‘invalid’

Example HTML5 Validation:

<form>
 <label for="firstname">First Name:</label>
 <input type="text" name="firstname" id="firstname" required maxlength="45">
 <label for="email">Email:</label>
 <input type="text" name="email" id="email" required maxlength="45">
 <label for="message">Message:</label>
 <input type="text" name="message" id="message" required maxlength="45">
 <button>Submit</button>
</form>

Here we have 3 required fields: Full Name, Email and Message.
If you skip either or all of these fields and press submit, you get a required message for each field you didn’t fill, this is a validation using in-built HTML5.

Inline validation using JavaScript

function validateForm() {
        var firstname = document.getElementById('firstname').value;
        var email = document.getElementById('email').value;
        var message = document.getElementById('message').value;

        document.getElementById('firstnameError').innerText = "";
        document.getElementById('emailError').innerText = "";
        document.getElementById('messageError').innerText = "";

        var isValid = true;

        if (firstname === "") {
            document.getElementById('firstnameError').innerText = "First Name is required";
            isValid = false;
        }

        if (!isValidEmail(email)) {
            document.getElementById('emailError').innerText = "Enter a valid email address";
            isValid = false;
        }

        if (message === "") {
            document.getElementById('messageError').innerText = "Message is required";
            isValid = false;
        }

        if (isValid) {
            document.getElementById('myForm').submit();
        }
    }

    function isValidEmail(email) {
        return email.includes('@') && email.includes('.');
    }

iIn this Javascript example :

validateForm function: Gathers input values, resets previous error messages, and checks validity.
First Name Validation: Checks if the first name is not empty, displaying an error if it is.
Email Validation: Calls the isValidEmail function to ensure a basic email format.
Message Validation: Checks if the message field is not empty.
Submission: If all validations pass, the form is submitted.

In the web development landscape, form validation is the silent guardian, securing user data accuracy and enhancing the overall experience. By preventing errors and bolstering security, validation builds trust and ensures seamless, reliable online interactions. An integral part of development, form validation is key to delivering secure and user-friendly digital experiences.