Form Validation

Form validation is essential for ensuring that the data submitted by users is accurate and complete. In HTML, we can use built-in attributes and JavaScript to validate user inputs before submission. Here's a brief overview of how HTML form validation works:

1. HTML5 Input Types

HTML5 introduced various input types that allow basic validation. For example:

• <input type='email' /> ensures the input is a valid email format.
• <input type='url' /> checks for a valid URL.
• <input type='number' /> validates numeric input.

2. Required Fields

You can make fields mandatory by adding the required attribute:

<input type="text" name="username" required>

This prevents form submission if the field is empty.

3. Pattern Matching

For more complex validation, use the pattern attribute with regular expressions:

<input type="text" name="phone" pattern="d{10}" required>

This ensures the phone number consists of exactly 10 digits.

4. Min and Max Values

To limit numeric input, use the min and max attributes:

<input type="number" name="age" min="18" max="99" required>

This ensures users enter a value within the specified range.

5. Form Validation with JavaScript

For more custom validation, you can add JavaScript. For example, you might check if a password is strong enough:

<script>
function validatePassword() {
    const password = document.getElementById("password").value;
    if (password.length < 8) {
        alert("Password must be at least 8 characters.");
        return false;
    }
    return true;
}
</script>

And attach it to your form:

<form onsubmit="return validatePassword()">
    <input type="password" id="password" required>
    <input type="submit" value="Submit">
</form>

Using HTML form validation ensures that users submit the correct data, improving the user experience and reducing errors.