Handling Traditional Form Submission

<!-- HTML Form with traditional submission -->
<form id="contact-form" action="/submit-contact" method="POST">
    <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
    </div>
    
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
    </div>
    
    <div class="form-group">
        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="5" required></textarea>
    </div>
    
    <button type="submit">Send Message</button>
</form>

<script>
// Add basic validation before traditional submission
document.getElementById('contact-form').addEventListener('submit', function(event) {
    // Validate the form
    let isValid = true;
    
    // Check each required field
    this.querySelectorAll('[required]').forEach(field => {
        if (!field.value.trim()) {
            isValid = false;
            field.classList.add('error');
        } else {
            field.classList.remove('error');
        }
    });
    
    // Validate email format
    const emailInput = document.getElementById('email');
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (emailInput.value && !emailPattern.test(emailInput.value)) {
        isValid = false;
        emailInput.classList.add('error');
    }
    
    // If validation fails, prevent submission
    if (!isValid) {
        event.preventDefault();
        alert('Please correct the errors in the form before submitting.');
    }
});
</script>

Modern AJAX Form Submission

<!-- HTML Form for AJAX submission -->
<form id="contact-form" class="ajax-form">
    <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <div class="error-message" id="name-error"></div>
    </div>
    
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <div class="error-message" id="email-error"></div>
    </div>
    
    <div class="form-group">
        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="5" required></textarea>
        <div class="error-message" id="message-error"></div>
    </div>
    
    <div class="form-status"></div>
    
    <button type="submit" id="submit-button">Send Message</button>
</form>

<script>
document.getElementById('contact-form').addEventListener('submit', function(event) {
    // Prevent default form submission
    event.preventDefault();
    
    // Validate the form
    if (!validateForm(this)) {
        return;
    }
    
    // Show loading state
    const submitButton = this.querySelector('button[type="submit"]');
    const originalButtonText = submitButton.textContent;
    submitButton.disabled = true;
    submitButton.innerHTML = '<span class="spinner"></span> Sending...';
    
    // Prepare form data
    const formData = new FormData(this);
    
    // Submit form via fetch API
    fetch('/api/contact', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (!response.ok) {
            // Handle HTTP errors
            throw new Error('Server error: ' + response.status);
        }
        return response.json();
    })
    .then(data => {
        // Handle successful submission
        showFormStatus('success', 'Thank you! Your message has been sent.');
        
        // Reset the form
        this.reset();
        
        // Additional success actions (e.g., redirect, show confirmation)
    })
    .catch(error => {
        // Handle errors
        console.error('Submission error:', error);
        showFormStatus('error', 'There was a problem sending your message. Please try again.');
    })
    .finally(() => {
        // Restore button state
        submitButton.disabled = false;
        submitButton.textContent = originalButtonText;
    });
});

function validateForm(form) {
    let isValid = true;
    
    // Reset previous errors
    form.querySelectorAll('.error-message').forEach(el => {
        el.textContent = '';
    });
    form.querySelectorAll('.form-control').forEach(el => {
        el.classList.remove('error');
    });
    
    // Validate each field
    form.querySelectorAll('[required]').forEach(field => {
        if (!field.value.trim()) {
            isValid = false;
            field.classList.add('error');
            
            // Show error message
            const errorElement = document.getElementById(`${field.id}-error`);
            if (errorElement) {
                errorElement.textContent = 'This field is required';
            }
        }
    });
    
    // Validate email format
    const emailInput = form.querySelector('input[type="email"]');
    if (emailInput && emailInput.value) {
        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailPattern.test(emailInput.value)) {
            isValid = false;
            emailInput.classList.add('error');
            
            const errorElement = document.getElementById(`${emailInput.id}-error`);
            if (errorElement) {
                errorElement.textContent = 'Please enter a valid email address';
            }
        }
    }
    
    return isValid;
}

function showFormStatus(type, message) {
    const statusElement = document.querySelector('.form-status');
    
    statusElement.textContent = message;
    statusElement.className = 'form-status ' + type;
    
    // Scroll to status message
    statusElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    
    // For success messages, auto-hide after a delay
    if (type === 'success') {
        setTimeout(() => {
            statusElement.classList.add('fade-out');
            
            // Remove the message after fade out
            setTimeout(() => {
                statusElement.textContent = '';
                statusElement.className = 'form-status';
            }, 500);
        }, 5000);
    }
}
</script>

Using the FormData API

The FormData API provides an easy way to construct key/value pairs representing form fields and their values:

// Creating FormData from a form element
const form = document.getElementById('myForm');
const formData = new FormData(form);

// Accessing form values
for (const [key, value] of formData.entries()) {
    console.log(`${key}: ${value}`);
}

// Adding extra data
formData.append('timestamp', Date.now());
formData.append('user_id', currentUserId);

// Removing a field
formData.delete('sensitive_field');

// Checking if a field exists
if (formData.has('email')) {
    console.log('Email field found');
}

// Getting a specific value
const email = formData.get('email');

// Multi-value fields (like select multiple or checkboxes with same name)
const selectedOptions = formData.getAll('options');

// Using with AJAX
fetch('/api/submit', {
    method: 'POST',
    body: formData  // No need to manually set Content-Type; it's handled automatically
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

Submitting Forms with JSON

For APIs that expect JSON data instead of form-encoded data:

document.getElementById('api-form').addEventListener('submit', function(event) {
    event.preventDefault();
    
    // Convert form data to JSON object
    const formData = new FormData(this);
    const jsonData = {};
    
    formData.forEach((value, key) => {
        // Handle arrays (multiple select or checkboxes with same name)
        if (jsonData[key]) {
            if (!Array.isArray(jsonData[key])) {
                jsonData[key] = [jsonData[key]];
            }
            jsonData[key].push(value);
        } else {
            jsonData[key] = value;
        }
    });
    
    // Special handling for numeric values
    ['age', 'height', 'weight'].forEach(field => {
        if (jsonData[field]) {
            jsonData[field] = Number(jsonData[field]);
        }
    });
    
    // Submit as JSON
    fetch('/api/users', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(jsonData)
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
        showMessage('User created successfully!');
    })
    .catch(error => {
        console.error('Error:', error);
        showError('Failed to create user. Please try again.');
    });
});

HTML5 Form Validation

HTML5 introduced built-in validation attributes that browsers enforce automatically:

<!-- Required field -->
<input type="text" name="username" required>

<!-- Email validation -->
<input type="email" name="email">

<!-- URL validation -->
<input type="url" name="website">

<!-- Numeric validation -->
<input type="number" name="age" min="18" max="120">

<!-- Pattern validation (Regular expression) -->
<input type="text" name="zipcode" pattern="[0-9]{5}(-[0-9]{4})?" title="Five digit zip code">

<!-- Length validation -->
<input type="text" name="username" minlength="3" maxlength="20">

<!-- Range validation -->
<input type="range" name="satisfaction" min="0" max="10" step="1">

<!-- Multiple values -->
<select name="skills" multiple>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
</select>

You can disable HTML5 validation by adding novalidate attribute to the form element:

<form id="my-form" novalidate>
    <!-- Form fields here -->
</form>

JavaScript Validation

Custom JavaScript validation gives you more control over validation rules and error messages:

document.getElementById('registration-form').addEventListener('submit', function(event) {
    // Prevent default form submission until validation passes
    event.preventDefault();
    
    // Track validation status
    let isValid = true;
    
    // Clear previous errors
    clearValidationErrors(this);
    
    // Get form fields
    const username = document.getElementById('username');
    const email = document.getElementById('email');
    const password = document.getElementById('password');
    const confirmPassword = document.getElementById('confirm-password');
    
    // Validate username (3-20 characters, alphanumeric with underscores)
    if (!username.value.trim()) {
        showError(username, 'Username is required');
        isValid = false;
    } else if (!/^[a-zA-Z0-9_]{3,20}$/.test(username.value)) {
        showError(username, 'Username must be 3-20 characters and may contain only letters, numbers, and underscores');
        isValid = false;
    }
    
    // Validate email
    if (!email.value.trim()) {
        showError(email, 'Email is required');
        isValid = false;
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
        showError(email, 'Please enter a valid email address');
        isValid = false;
    }
    
    // Validate password (at least 8 chars, must contain number, letter, special char)
    if (!password.value) {
        showError(password, 'Password is required');
        isValid = false;
    } else if (password.value.length < 8) {
        showError(password, 'Password must be at least 8 characters');
        isValid = false;
    } else if (!/(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])/.test(password.value)) {
        showError(password, 'Password must include at least one number, one letter, and one special character');
        isValid = false;
    }
    
    // Validate password confirmation
    if (confirmPassword.value !== password.value) {
        showError(confirmPassword, 'Passwords do not match');
        isValid = false;
    }
    
    // If all validations pass, submit the form
    if (isValid) {
        // For traditional submission, you can use:
        // this.submit();
        
        // For AJAX submission:
        submitFormAjax(this);
    }
});

// Helper functions
function showError(inputElement, errorMessage) {
    // Mark the input as invalid
    inputElement.classList.add('invalid');
    
    // Find or create an error message element
    let errorElement = document.getElementById(inputElement.id + '-error');
    
    if (!errorElement) {
        errorElement = document.createElement('div');
        errorElement.className = 'error-message';
        errorElement.id = inputElement.id + '-error';
        inputElement.parentNode.insertBefore(errorElement, inputElement.nextSibling);
    }
    
    errorElement.textContent = errorMessage;
}

function clearValidationErrors(form) {
    // Remove all error messages
    form.querySelectorAll('.error-message').forEach(element => {
        element.textContent = '';
    });
    
    // Remove invalid class from all inputs
    form.querySelectorAll('.invalid').forEach(element => {
        element.classList.remove('invalid');
    });
}

Real-time Validation

Validating as the user types provides immediate feedback:

// Set up real-time validation for all required fields
document.querySelectorAll('input, select, textarea').forEach(field => {
    if (field.required || field.dataset.validate) {
        // Validate on blur (when field loses focus)
        field.addEventListener('blur', function() {
            validateField(this);
        });
        
        // For some fields, validate as the user types
        if (field.dataset.validateLive === 'true') {
            field.addEventListener('input', function() {
                // Only validate if the field has been blurred once
                if (this.dataset.blurred === 'true') {
                    validateField(this);
                }
            });
        }
        
        // Mark fields as blurred after first interaction
        field.addEventListener('blur', function() {
            this.dataset.blurred = 'true';
        });
    }
});

// Common validation function
function validateField(field) {
    // Clear previous error
    const errorElement = document.getElementById(`${field.id}-error`);
    if (errorElement) {
        errorElement.textContent = '';
    }
    
    field.classList.remove('invalid', 'valid');
    
    // Skip empty optional fields
    if (!field.required && !field.value) {
        return true;
    }
    
    // Required field check
    if (field.required && !field.value.trim()) {
        field.classList.add('invalid');
        if (errorElement) {
            errorElement.textContent = 'This field is required';
        }
        return false;
    }
    
    // Field-specific validation
    if (field.value) {
        // Email validation
        if (field.type === 'email') {
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailPattern.test(field.value)) {
                field.classList.add('invalid');
                if (errorElement) {
                    errorElement.textContent = 'Please enter a valid email address';
                }
                return false;
            }
        }
        
        // Phone number validation
        if (field.id === 'phone') {
            const phonePattern = /^\+?[0-9\s\-()]{10,20}$/;
            if (!phonePattern.test(field.value)) {
                field.classList.add('invalid');
                if (errorElement) {
                    errorElement.textContent = 'Please enter a valid phone number';
                }
                return false;
            }
        }
        
        // Password complexity
        if (field.id === 'password') {
            if (field.value.length < 8) {
                field.classList.add('invalid');
                if (errorElement) {
                    errorElement.textContent = 'Password must be at least 8 characters';
                }
                return false;
            }
        }
        
        // Password confirmation matching
        if (field.id === 'confirm-password') {
            const password = document.getElementById('password').value;
            if (field.value !== password) {
                field.classList.add('invalid');
                if (errorElement) {
                    errorElement.textContent = 'Passwords do not match';
                }
                return false;
            }
        }
        
        // Custom validation rules via data attributes
        if (field.dataset.pattern) {
            const pattern = new RegExp(field.dataset.pattern);
            if (!pattern.test(field.value)) {
                field.classList.add('invalid');
                if (errorElement) {
                    errorElement.textContent = field.dataset.errorMsg || 'Invalid format';
                }
                return false;
            }
        }
        
        if (field.dataset.minLength && field.value.length < parseInt(field.dataset.minLength)) {
            field.classList.add('invalid');
            if (errorElement) {
                errorElement.textContent = `Minimum length is ${field.dataset.minLength} characters`;
            }
            return false;
        }
    }
    
    // If we get here, the field is valid
    field.classList.add('valid');
    return true;
}

The Constraint Validation API

HTML5 provides a JavaScript API for working with form validation:

// Check if a field is valid
const emailInput = document.getElementById('email');
console.log(emailInput.validity.valid); // true or false

// Check specific validity states
console.log(emailInput.validity.valueMissing); // Is the required field empty?
console.log(emailInput.validity.typeMismatch); // Does the value not match the type (e.g., email)?
console.log(emailInput.validity.patternMismatch); // Does the value not match the pattern?
console.log(emailInput.validity.tooLong); // Is the value too long?
console.log(emailInput.validity.tooShort); // Is the value too short?
console.log(emailInput.validity.rangeUnderflow); // Is the value less than min?
console.log(emailInput.validity.rangeOverflow); // Is the value greater than max?
console.log(emailInput.validity.stepMismatch); // Does the value not align with the step attribute?
console.log(emailInput.validity.badInput); // Is the input not processable by the browser?
console.log(emailInput.validity.customError); // Is there a custom error?

// Get validation message
console.log(emailInput.validationMessage);

// Set custom validation message
emailInput.setCustomValidity('This email is already registered');

// Clear custom validation message
emailInput.setCustomValidity('');

// Check if a form will validate
const form = document.getElementById('my-form');
console.log(form.checkValidity()); // true or false

// Report validity (shows validation UI)
form.reportValidity();

// Example: Custom validation with the API
document.getElementById('username').addEventListener('input', function() {
    // Check if username already exists (simulated)
    const existingUsernames = ['john', 'alice', 'bob'];
    
    if (existingUsernames.includes(this.value.toLowerCase())) {
        this.setCustomValidity('This username is already taken');
    } else {
        this.setCustomValidity('');
    }
});