<form id="registrationForm" novalidate>
    <div class="form-group">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" data-label="Username" required minlength="3">
        <small class="error-message"></small>
    </div>

    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" data-label="Email" required>
        <small class="error-message"></small>
    </div>

    <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" data-label="Password" required minlength="6">
        <small class="error-message"></small>
    </div>

    <div class="form-group">
        <label for="passwordConfirm">Confirm Password:</label>
        <input type="password" id="passwordConfirm" name="passwordConfirm" data-label="Confirm Password" required>
        <small class="error-message"></small>
    </div>

    <button type="submit">Register</button>
</form>

<style>
    /* Basic styling for demonstration */
    .form-group {
        margin-bottom: 1rem;
    }
    .form-group input {
        display: block;
        width: 100%;
        padding: 0.5rem;
        margin-top: 0.25rem;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .form-group input.error {
        border-color: red;
    }
    .error-message {
        color: red;
        font-size: 0.8em;
        margin-top: 0.25rem;
        display: block; /* Ensure it takes up space even when empty */
        min-height: 1.2em; /* Prevent layout shift when error appears */
    }
</style>

The `novalidate` attribute on the form disables the browser's default HTML5 validation, giving us full control with JavaScript.

The JavaScript Validator Logic

1. Selecting Elements

First, we need to get references to our form and its input fields.

const form = document.getElementById('registrationForm');
const usernameInput = document.getElementById('username');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const passwordConfirmInput = document.getElementById('passwordConfirm');

2. Helper Functions for Error Display

These functions will add or remove error messages and styling.

function showError(inputElement, message) {
    const formGroup = inputElement.parentElement;
    const errorMessageElement = formGroup.querySelector('.error-message');
    formGroup.classList.add('error'); // Add error class to parent div for styling
    inputElement.classList.add('error'); // Add error class to input
    errorMessageElement.textContent = message;
}

function clearError(inputElement) {
    const formGroup = inputElement.parentElement;
    const errorMessageElement = formGroup.querySelector('.error-message');
    formGroup.classList.remove('error'); // Remove error class from parent div
    inputElement.classList.remove('error'); // Remove error class from input
    errorMessageElement.textContent = '';
}

3. Individual Validation Functions

Now, let's create functions for specific validation rules.

// Checks if input is empty
function checkRequired(inputElement) {
    const label = inputElement.dataset.label || inputElement.name;
    if (inputElement.value.trim() === '') {
        showError(inputElement, `${label} is required`);
        return false;
    } else {
        clearError(inputElement);
        return true;
    }
}

// Checks input length
function checkLength(inputElement, min, max) {
    const label = inputElement.dataset.label || inputElement.name;
    if (inputElement.value.length < min) {
        showError(inputElement, `${label} must be at least ${min} characters`);
        return false;
    } else if (inputElement.value.length > max) {
        showError(inputElement, `${label} must be less than ${max + 1} characters`);
        return false;
    } else {
        clearError(inputElement);
        return true;
    }
}

// Checks email is valid
function checkEmail(inputElement) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (inputElement.value.trim() === '') {
        showError(inputElement, 'Email is required');
        return false;
    } else if (!emailRegex.test(inputElement.value.trim())) {
        showError(inputElement, 'Email is not valid');
        return false;
    } else {
        clearError(inputElement);
        return true;
    }
}

// Checks if passwords match
function checkPasswordsMatch(passwordInput, confirmPasswordInput) {
    if (passwordInput.value !== confirmPasswordInput.value) {
        showError(confirmPasswordInput, 'Passwords do not match');
        return false;
    } else {
        clearError(confirmPasswordInput);
        return true;
    }
}

4. The Main Validation Logic and Event Listener

We'll combine these functions into a single `validateForm` function that runs on submission.

form.addEventListener('submit', function(e) {
    e.preventDefault(); // Prevent default form submission

    let isFormValid = true;

    // Validate Username
    if (!checkRequired(usernameInput)) {
        isFormValid = false;
    } else if (!checkLength(usernameInput, 3, 15)) {
        isFormValid = false;
    }

    // Validate Email
    if (!checkRequired(emailInput)) {
        isFormValid = false;
    } else if (!checkEmail(emailInput)) {
        isFormValid = false;
    }

    // Validate Password
    if (!checkRequired(passwordInput)) {
        isFormValid = false;
    } else if (!checkLength(passwordInput, 6, 25)) {
        isFormValid = false;
    }

    // Validate Confirm Password
    if (!checkRequired(passwordConfirmInput)) {
        isFormValid = false;
    } else if (!checkPasswordsMatch(passwordInput, passwordConfirmInput)) {
        isFormValid = false;
    }
    // Note: The order of validation matters for displaying clear errors.
    // E.g., checkRequired before checkEmail.

    if (isFormValid) {
        alert('Form submitted successfully!');
        // You would typically send the form data to a server here
        // form.submit(); // Or use fetch API for AJAX submission
    }
});

Enhancements and Best Practices

• Real-time Validation: Instead of only validating on submit, you can validate fields as the user types or moves between fields.

  
  // Example for real-time validation on blur (when input loses focus)
  usernameInput.addEventListener('blur', () => {
      checkRequired(usernameInput) && checkLength(usernameInput, 3, 15);
  });
  emailInput.addEventListener('blur', () => {
      checkRequired(emailInput) && checkEmail(emailInput);
  });
  // You might also add 'input' event for instant feedback on typing
          

• Modularization: For larger applications, consider creating a more modular validation system where rules can be easily defined and applied to fields, perhaps using a configuration object or a validation class.
• Accessibility: Use ARIA attributes like `aria-invalid="true"` and `aria-describedby` to link error messages to their respective inputs, making your forms more accessible to users with screen readers.
• Custom Error Messages: Provide more specific and user-friendly error messages tailored to the input.
• Throttling/Debouncing: For real-time validation on `input` events, consider throttling or debouncing the validation function to prevent excessive calls, especially for complex rules.
• Server-Side Validation (Reiterated): No client-side validation, no matter how robust, can replace server-side validation. Always validate data on the server to protect against malicious users who bypass client-side scripts.

Conclusion