垦荒学园

English

简体中文

English

简体中文

Toggle theme

JavaScript Forms ​

Forms are core components for user interaction in web applications. JavaScript provides rich APIs for form handling, including validation, data processing, and dynamic interactions. Mastering form handling techniques is crucial for creating user-friendly web applications.

What is a Form ​

Forms are collections of HTML elements used to collect user input. Through JavaScript, we can dynamically manipulate form elements, validate user input, and handle form submissions.

html
<!-- Basic form example -->
<form id="userForm">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
    </div>
    
    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
    </div>
    
    <div>
        <label for="age">Age:</label>
        <input type="number" id="age" name="age" min="0" max="150">
    </div>
    
    <div>
        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4"></textarea>
    </div>
    
    <button type="submit">Submit</button>
</form>

Accessing Form Elements ​

Access by ID ​

javascript
// Access form elements using getElementById
const nameInput = document.getElementById("name");
const emailInput = document.getElementById("email");

// Get and set values
console.log(nameInput.value); // Get value
nameInput.value = "John";     // Set value

// Get and set attributes
console.log(emailInput.type);    // "email"
console.log(emailInput.required); // true

Access through Form Object ​

javascript
// Access elements through form
const form = document.getElementById("userForm");

// Access by name attribute
const nameField = form.elements.name;
const emailField = form.elements.email;

// Access by index
const firstField = form.elements[0];

// Access by ID
const ageField = form.elements["age"];

Form Collection Operations ​

javascript
const form = document.getElementById("userForm");

// Iterate through all form elements
for (let i = 0; i < form.elements.length; i++) {
    const element = form.elements[i];
    console.log(`Element ${i}: ${element.name} = ${element.value}`);
}

// Convert to array for operations
const formElements = Array.from(form.elements);
formElements.forEach(element => {
    if (element.type === "text" || element.type === "email") {
        element.style.border = "1px solid #ccc";
    }
});

Form Event Handling ​

Form Submit Event ​

javascript
const form = document.getElementById("userForm");

// Listen for form submission
form.addEventListener("submit", function(event) {
    // Prevent default submit behavior
    event.preventDefault();
    
    // Process form data
    console.log("Form submitted");
    processFormData();
});

function processFormData() {
    // Get form data
    const formData = new FormData(form);
    
    // Iterate through form data
    for (let [key, value] of formData.entries()) {
        console.log(`${key}: ${value}`);
    }
    
    // Convert to plain object
    const data = Object.fromEntries(formData);
    console.log("Form data:", data);
}

Field Event Handling ​

javascript
// Input event
const nameInput = document.getElementById("name");
nameInput.addEventListener("input", function(event) {
    console.log("Input changed:", event.target.value);
});

// Focus events
nameInput.addEventListener("focus", function(event) {
    console.log("Got focus");
    event.target.style.backgroundColor = "#f0f0f0";
});

nameInput.addEventListener("blur", function(event) {
    console.log("Lost focus");
    event.target.style.backgroundColor = "";
});

// Change event
const ageInput = document.getElementById("age");
ageInput.addEventListener("change", function(event) {
    console.log("Value changed:", event.target.value);
});

Real-time Validation ​

javascript
// Real-time validation example
class FormValidator {
    constructor(form) {
        this.form = form;
        this.init();
    }
    
    init() {
        // Add real-time validation to all input fields
        this.form.querySelectorAll("input, textarea, select").forEach(field => {
            field.addEventListener("blur", () => this.validateField(field));
            field.addEventListener("input", () => this.clearFieldError(field));
        });
        
        // Form submission validation
        this.form.addEventListener("submit", (event) => this.handleSubmit(event));
    }
    
    validateField(field) {
        const fieldName = field.name;
        const value = field.value.trim();
        let errorMessage = "";
        
        // Validate based on field type
        switch (fieldName) {
            case "name":
                if (!value) {
                    errorMessage = "Name is required";
                } else if (value.length < 2) {
                    errorMessage = "Name must be at least 2 characters";
                }
                break;
                
            case "email":
                if (!value) {
                    errorMessage = "Email is required";
                } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
                    errorMessage = "Please enter a valid email address";
                }
                break;
                
            case "age":
                if (value && (isNaN(value) || value < 0 || value > 150)) {
                    errorMessage = "Please enter a valid age (0-150)";
                }
                break;
        }
        
        this.setFieldError(field, errorMessage);
        return !errorMessage;
    }
    
    setFieldError(field, errorMessage) {
        field.classList.remove("error");
        
        const existingError = field.parentNode.querySelector(".error-message");
        if (existingError) {
            existingError.remove();
        }
        
        if (errorMessage) {
            field.classList.add("error");
            
            const errorElement = document.createElement("div");
            errorElement.className = "error-message";
            errorElement.textContent = errorMessage;
            field.parentNode.appendChild(errorElement);
        }
    }
    
    clearFieldError(field) {
        field.classList.remove("error");
        const errorElement = field.parentNode.querySelector(".error-message");
        if (errorElement) {
            errorElement.remove();
        }
    }
    
    handleSubmit(event) {
        event.preventDefault();
        
        let isValid = true;
        this.form.querySelectorAll("input, textarea, select").forEach(field => {
            if (!this.validateField(field)) {
                isValid = false;
            }
        });
        
        if (isValid) {
            this.submitForm();
        } else {
            const firstError = this.form.querySelector(".error");
            if (firstError) {
                firstError.scrollIntoView({ behavior: "smooth", block: "center" });
                firstError.focus();
            }
        }
    }
    
    async submitForm() {
        const submitButton = this.form.querySelector("button[type='submit']");
        const originalText = submitButton.textContent;
        
        try {
            submitButton.disabled = true;
            submitButton.textContent = "Submitting...";
            
            const formData = new FormData(this.form);
            const data = Object.fromEntries(formData);
            
            const response = await fetch("/api/submit", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(data)
            });
            
            if (response.ok) {
                this.showMessage("Submitted successfully!", "success");
                this.form.reset();
            } else {
                throw new Error("Submission failed");
            }
        } catch (error) {
            this.showMessage("Submission failed, please try again", "error");
            console.error("Submit error:", error);
        } finally {
            submitButton.disabled = false;
            submitButton.textContent = originalText;
        }
    }
    
    showMessage(message, type) {
        const existingMessage = this.form.querySelector(".form-message");
        if (existingMessage) {
            existingMessage.remove();
        }
        
        const messageElement = document.createElement("div");
        messageElement.className = `form-message message-${type}`;
        messageElement.textContent = message;
        
        this.form.insertBefore(messageElement, this.form.firstChild);
        
        setTimeout(() => {
            if (messageElement.parentNode) {
                messageElement.remove();
            }
        }, 3000);
    }
}

Form Data Processing ​

FormData Object ​

javascript
const form = document.getElementById("userForm");

// Create FormData object
const formData = new FormData(form);

// Append additional data
formData.append("timestamp", new Date().toISOString());
formData.append("userId", "123");

// Get data
console.log(formData.get("name")); // Get single value
console.log(formData.getAll("hobbies")); // Get all values with same name

// Iterate through data
for (let [key, value] of formData.entries()) {
    console.log(`${key}: ${value}`);
}

// Convert to object
const dataObject = Object.fromEntries(formData);
console.log(dataObject);

// Convert to JSON
const jsonData = JSON.stringify(dataObject);
console.log(jsonData);

Manual Form Data Building ​

javascript
// Manually build form data object
function getFormData(form) {
    const data = {};
    
    for (let element of form.elements) {
        if (!element.name || element.disabled) continue;
        
        switch (element.type) {
            case "checkbox":
                if (element.checked) {
                    if (data[element.name]) {
                        if (Array.isArray(data[element.name])) {
                            data[element.name].push(element.value);
                        } else {
                            data[element.name] = [data[element.name], element.value];
                        }
                    } else {
                        data[element.name] = element.value;
                    }
                }
                break;
                
            case "radio":
                if (element.checked) {
                    data[element.name] = element.value;
                }
                break;
                
            case "select-multiple":
                const selectedOptions = Array.from(element.selectedOptions)
                    .map(option => option.value);
                data[element.name] = selectedOptions;
                break;
                
            case "file":
                data[element.name] = element.files;
                break;
                
            default:
                data[element.name] = element.value;
        }
    }
    
    return data;
}

Form Validation ​

HTML5 Built-in Validation ​

html
<form id="validationForm">
    <!-- Required field -->
    <input type="text" name="requiredField" required>
    
    <!-- Email validation -->
    <input type="email" name="email" required>
    
    <!-- Number range -->
    <input type="number" name="age" min="0" max="150" required>
    
    <!-- Length limits -->
    <input type="text" name="username" minlength="3" maxlength="20" required>
    
    <!-- Pattern matching -->
    <input type="text" name="phone" pattern="\d{3}-\d{3}-\d{4}" 
           title="Please enter phone number in XXX-XXX-XXXX format">
    
    <!-- Custom validation message -->
    <input type="text" name="custom" required
           oninvalid="this.setCustomValidity('This is a custom error message')"
           oninput="this.setCustomValidity('')">
</form>

JavaScript Validation ​

javascript
// Advanced form validation class
class AdvancedFormValidator {
    constructor(form, rules = {}) {
        this.form = form;
        this.rules = rules;
        this.errors = new Map();
        this.init();
    }
    
    init() {
        Object.keys(this.rules).forEach(fieldName => {
            const field = this.form.elements[fieldName];
            if (field) {
                field.addEventListener("blur", () => this.validateField(fieldName));
                field.addEventListener("input", () => this.clearError(fieldName));
            }
        });
        
        this.form.addEventListener("submit", (event) => this.handleSubmit(event));
    }
    
    validateField(fieldName) {
        const field = this.form.elements[fieldName];
        const value = field.value.trim();
        const rules = this.rules[fieldName];
        
        this.clearError(fieldName);
        
        for (let rule of rules) {
            const isValid = this.executeRule(rule, value, field);
            if (!isValid) {
                this.setError(fieldName, rule.message);
                return false;
            }
        }
        
        return true;
    }
    
    executeRule(rule, value, field) {
        switch (rule.type) {
            case "required":
                return value !== "";
            case "minLength":
                return value.length >= rule.value;
            case "maxLength":
                return value.length <= rule.value;
            case "pattern":
                return new RegExp(rule.value).test(value);
            case "email":
                return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
            case "number":
                return !isNaN(value) && !isNaN(parseFloat(value));
            case "min":
                return parseFloat(value) >= rule.value;
            case "max":
                return parseFloat(value) <= rule.value;
            case "custom":
                return rule.validator(value, field, this.form);
            default:
                return true;
        }
    }
    
    setError(fieldName, message) {
        this.errors.set(fieldName, message);
        const field = this.form.elements[fieldName];
        field.classList.add("error");
        
        const errorElement = document.createElement("div");
        errorElement.className = "error-message";
        errorElement.textContent = message;
        errorElement.id = `error-${fieldName}`;
        
        const existingError = document.getElementById(`error-${fieldName}`);
        if (existingError) {
            existingError.remove();
        }
        
        field.parentNode.appendChild(errorElement);
    }
    
    clearError(fieldName) {
        this.errors.delete(fieldName);
        const field = this.form.elements[fieldName];
        field.classList.remove("error");
        
        const errorElement = document.getElementById(`error-${fieldName}`);
        if (errorElement) {
            errorElement.remove();
        }
    }
    
    validateAll() {
        let isValid = true;
        Object.keys(this.rules).forEach(fieldName => {
            if (!this.validateField(fieldName)) {
                isValid = false;
            }
        });
        return isValid;
    }
    
    handleSubmit(event) {
        event.preventDefault();
        
        if (this.validateAll()) {
            this.submitForm();
        } else {
            const firstErrorField = this.form.querySelector(".error");
            if (firstErrorField) {
                firstErrorField.scrollIntoView({ behavior: "smooth", block: "center" });
                firstErrorField.focus();
            }
        }
    }
    
    async submitForm() {
        console.log("Form validation passed, ready to submit");
    }
}

// Usage example
const validationRules = {
    name: [
        { type: "required", message: "Name is required" },
        { type: "minLength", value: 2, message: "Name must be at least 2 characters" }
    ],
    email: [
        { type: "required", message: "Email is required" },
        { type: "email", message: "Please enter a valid email address" }
    ],
    age: [
        { type: "required", message: "Age is required" },
        { type: "number", message: "Age must be a number" },
        { type: "min", value: 0, message: "Age cannot be negative" },
        { type: "max", value: 150, message: "Age cannot exceed 150" }
    ],
    phone: [
        { type: "pattern", value: "^\\d{3}-\\d{3}-\\d{4}$", message: "Phone format should be XXX-XXX-XXXX" }
    ]
};

Dynamic Forms ​

Dynamic Field Addition ​

javascript
// Dynamic form manager
class DynamicFormManager {
    constructor(form) {
        this.form = form;
        this.fieldCounter = 0;
        this.init();
    }
    
    init() {
        const addButton = this.form.querySelector("[data-add-field]");
        if (addButton) {
            addButton.addEventListener("click", () => this.addField());
        }
    }
    
    addField() {
        this.fieldCounter++;
        const fieldName = `dynamic-field-${this.fieldCounter}`;
        
        const fieldContainer = document.createElement("div");
        fieldContainer.className = "dynamic-field";
        fieldContainer.innerHTML = `
            <input type="text" name="${fieldName}" placeholder="Dynamic field ${this.fieldCounter}">
            <button type="button" class="remove-field" data-remove-field>×</button>
        `;
        
        const addButton = this.form.querySelector("[data-add-field]");
        this.form.insertBefore(fieldContainer, addButton.parentNode);
        
        const removeButton = fieldContainer.querySelector("[data-remove-field]");
        removeButton.addEventListener("click", () => {
            fieldContainer.remove();
        });
    }
    
    addCheckboxGroup(name, options) {
        const groupContainer = document.createElement("div");
        groupContainer.className = "checkbox-group";
        
        options.forEach((option, index) => {
            const checkboxId = `${name}-${index}`;
            const checkboxContainer = document.createElement("div");
            checkboxContainer.innerHTML = `
                <input type="checkbox" id="${checkboxId}" name="${name}" value="${option.value}">
                <label for="${checkboxId}">${option.label}</label>
            `;
            groupContainer.appendChild(checkboxContainer);
        });
        
        return groupContainer;
    }
    
    addRadioGroup(name, options) {
        const groupContainer = document.createElement("div");
        groupContainer.className = "radio-group";
        
        options.forEach((option, index) => {
            const radioId = `${name}-${index}`;
            const radioContainer = document.createElement("div");
            radioContainer.innerHTML = `
                <input type="radio" id="${radioId}" name="${name}" value="${option.value}">
                <label for="${radioId}">${option.label}</label>
            `;
            groupContainer.appendChild(radioContainer);
        });
        
        return groupContainer;
    }
    
    toggleField(fieldName, condition) {
        const field = this.form.elements[fieldName];
        if (field) {
            field.closest(".form-field").style.display = condition ? "block" : "none";
        }
    }
}

Conditional Fields ​

javascript
// Conditional form fields management
class ConditionalFields {
    constructor(form) {
        this.form = form;
        this.conditions = new Map();
        this.init();
    }
    
    init() {
        this.form.addEventListener("change", (event) => {
            this.checkConditions(event.target);
        });
    }
    
    addCondition(fieldName, conditionFunction, targetFields) {
        this.conditions.set(fieldName, {
            condition: conditionFunction,
            targets: targetFields
        });
    }
    
    checkConditions(changedField) {
        const fieldName = changedField.name;
        const conditionRule = this.conditions.get(fieldName);
        
        if (conditionRule) {
            const shouldShow = conditionRule.condition(changedField, this.form);
            this.toggleFields(conditionRule.targets, shouldShow);
        }
    }
    
    toggleFields(fieldNames, show) {
        fieldNames.forEach(fieldName => {
            const field = this.form.elements[fieldName];
            if (field) {
                const container = field.closest(".form-field") || field.parentNode;
                container.style.display = show ? "block" : "none";
                
                if (!show) {
                    field.value = "";
                    field.removeAttribute("required");
                }
            }
        });
    }
}

Form Best Practices ​

1. Progressive Enhancement ​

html
<!-- Progressive enhanced form -->
<form id="progressiveForm" action="/submit" method="POST">
    <div class="form-field">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <div class="error-message" hidden></div>
    </div>
    
    <div class="form-field">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <div class="error-message" hidden></div>
    </div>
    
    <button type="submit">Submit</button>
    <div class="form-message" hidden></div>
</form>
javascript
// Progressive enhancement JavaScript
class ProgressiveForm {
    constructor(form) {
        this.form = form;
        this.isEnhanced = false;
        this.init();
    }
    
    init() {
        if (this.supportsEnhancement()) {
            this.enhanceForm();
        }
    }
    
    supportsEnhancement() {
        return 'fetch' in window && 'FormData' in window;
    }
    
    enhanceForm() {
        this.isEnhanced = true;
        
        this.form.addEventListener("submit", (event) => {
            event.preventDefault();
            this.handleSubmit();
        });
        
        this.form.querySelectorAll("input, textarea").forEach(field => {
            field.addEventListener("blur", () => this.validateField(field));
        });
        
        console.log("Form enhanced");
    }
    
    validateField(field) {
        if (!this.isEnhanced) return true;
        
        const value = field.value.trim();
        let isValid = true;
        let errorMessage = "";
        
        if (field.hasAttribute("required") && !value) {
            isValid = false;
            errorMessage = "This field is required";
        } else if (field.type === "email" && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
            isValid = false;
            errorMessage = "Please enter a valid email address";
        }
        
        this.showFieldError(field, errorMessage);
        return isValid;
    }
    
    showFieldError(field, message) {
        const errorElement = field.parentNode.querySelector(".error-message");
        if (errorElement) {
            errorElement.textContent = message;
            errorElement.hidden = !message;
        }
        
        field.classList.toggle("error", !!message);
    }
    
    async handleSubmit() {
        if (!this.isEnhanced) return;
        
        let isValid = true;
        this.form.querySelectorAll("input, textarea").forEach(field => {
            if (!this.validateField(field)) {
                isValid = false;
            }
        });
        
        if (!isValid) return;
        
        try {
            this.setFormState("submitting");
            
            const formData = new FormData(this.form);
            const response = await fetch(this.form.action, {
                method: this.form.method,
                body: formData
            });
            
            if (response.ok) {
                this.setFormState("success", "Submitted successfully!");
                this.form.reset();
            } else {
                throw new Error("Submission failed");
            }
        } catch (error) {
            this.setFormState("error", "Submission failed, please try again");
            console.error("Submit error:", error);
        }
    }
    
    setFormState(state, message = "") {
        const submitButton = this.form.querySelector("button[type='submit']");
        const messageElement = this.form.querySelector(".form-message");
        
        switch (state) {
            case "submitting":
                submitButton.disabled = true;
                submitButton.textContent = "Submitting...";
                break;
                
            case "success":
            case "error":
                submitButton.disabled = false;
                submitButton.textContent = "Submit";
                if (messageElement) {
                    messageElement.textContent = message;
                    messageElement.className = `form-message ${state}`;
                    messageElement.hidden = false;
                }
                break;
        }
    }
}

2. Accessibility Optimization ​

javascript
// Accessibility-friendly form
class AccessibleForm {
    constructor(form) {
        this.form = form;
        this.init();
    }
    
    init() {
        this.enhanceAccessibility();
        
        this.form.addEventListener("keydown", (event) => {
            this.handleKeyboardNavigation(event);
        });
    }
    
    enhanceAccessibility() {
        this.form.querySelectorAll("input, textarea, select").forEach(field => {
            const label = this.form.querySelector(`label[for="${field.id}"]`);
            if (label && !field.hasAttribute("aria-labelledby")) {
                field.setAttribute("aria-labelledby", field.id);
            }
            
            if (field.hasAttribute("required")) {
                field.setAttribute("aria-required", "true");
            }
            
            field.setAttribute("aria-invalid", "false");
        });
    }
    
    handleKeyboardNavigation(event) {
        // Ctrl + Enter to submit form
        if (event.ctrlKey && event.key === "Enter") {
            event.preventDefault();
            this.form.dispatchEvent(new Event("submit"));
        }
        
        // Esc to clear current field
        if (event.key === "Escape") {
            const activeElement = document.activeElement;
            if (activeElement.form === this.form) {
                activeElement.value = "";
            }
        }
    }
    
    setFieldError(field, message) {
        field.setAttribute("aria-invalid", "true");
        field.setAttribute("aria-describedby", `error-${field.name}`);
        
        const errorElement = document.getElementById(`error-${field.name}`);
        if (errorElement) {
            errorElement.setAttribute("role", "alert");
        }
    }
    
    clearFieldError(field) {
        field.setAttribute("aria-invalid", "false");
        field.removeAttribute("aria-describedby");
    }
}

Practical Examples ​

User Registration Form ​

javascript
// User registration form manager
class UserRegistrationForm {
    constructor(form) {
        this.form = form;
        this.init();
    }
    
    init() {
        this.form.querySelectorAll("input").forEach(field => {
            field.addEventListener("blur", () => this.validateField(field));
            field.addEventListener("input", () => this.clearError(field));
        });
        
        const passwordField = this.form.elements.password;
        if (passwordField) {
            passwordField.addEventListener("input", () => this.checkPasswordStrength());
        }
        
        const confirmPasswordField = this.form.elements.confirmPassword;
        if (confirmPasswordField) {
            confirmPasswordField.addEventListener("input", () => this.validatePasswordMatch());
        }
        
        this.form.addEventListener("submit", (event) => this.handleSubmit(event));
    }
    
    checkPasswordStrength() {
        const password = this.form.elements.password.value;
        const strengthIndicator = this.form.querySelector(".password-strength");
        
        if (!strengthIndicator) return;
        
        let strength = 0;
        let feedback = [];
        
        if (password.length >= 8) strength++;
        else feedback.push("At least 8 characters");
        
        if (/[a-z]/.test(password)) strength++;
        else feedback.push("Include lowercase letters");
        
        if (/[A-Z]/.test(password)) strength++;
        else feedback.push("Include uppercase letters");
        
        if (/\d/.test(password)) strength++;
        else feedback.push("Include numbers");
        
        if (/[^a-zA-Z\d]/.test(password)) strength++;
        else feedback.push("Include special characters");
        
        const strengthText = ["Very Weak", "Weak", "Medium", "Strong", "Very Strong"];
        const strengthClass = ["very-weak", "weak", "medium", "strong", "very-strong"];
        
        strengthIndicator.textContent = `Password strength: ${strengthText[strength] || "Very Weak"}`;
        strengthIndicator.className = `password-strength ${strengthClass[strength] || "very-weak"}`;
        
        if (feedback.length > 0) {
            strengthIndicator.title = "Suggestions: " + feedback.join(", ");
        }
    }
    
    validatePasswordMatch() {
        const password = this.form.elements.password.value;
        const confirmPassword = this.form.elements.confirmPassword.value;
        const confirmPasswordField = this.form.elements.confirmPassword;
        
        if (confirmPassword && password !== confirmPassword) {
            this.setError(confirmPasswordField, "Passwords do not match");
        } else {
            this.clearError(confirmPasswordField);
        }
    }
}

Multi-step Form ​

javascript
// Multi-step form manager
class MultiStepForm {
    constructor(form) {
        this.form = form;
        this.steps = Array.from(form.querySelectorAll(".form-step"));
        this.currentStep = 0;
        this.formData = {};
        this.init();
    }
    
    init() {
        this.createStepIndicator();
        this.showStep(0);
        
        this.form.addEventListener("click", (event) => {
            if (event.target.matches("[data-next]")) {
                event.preventDefault();
                this.nextStep();
            }
            
            if (event.target.matches("[data-prev]")) {
                event.preventDefault();
                this.prevStep();
            }
        });
        
        this.form.addEventListener("submit", (event) => {
            event.preventDefault();
            this.submitForm();
        });
    }
    
    createStepIndicator() {
        const indicator = document.createElement("div");
        indicator.className = "step-indicator";
        
        this.steps.forEach((step, index) => {
            const stepNumber = index + 1;
            const stepElement = document.createElement("div");
            stepElement.className = "step";
            stepElement.innerHTML = `
                <div class="step-number">${stepNumber}</div>
                <div class="step-title">${step.dataset.title || `Step ${stepNumber}`}</div>
            `;
            indicator.appendChild(stepElement);
        });
        
        this.form.insertBefore(indicator, this.steps[0]);
        this.indicator = indicator;
    }
    
    showStep(stepIndex) {
        this.steps.forEach(step => {
            step.hidden = true;
        });
        
        this.steps[stepIndex].hidden = false;
        this.currentStep = stepIndex;
        
        this.updateStepIndicator();
        this.updateNavigation();
    }
    
    nextStep() {
        if (this.validateCurrentStep()) {
            this.saveCurrentStepData();
            if (this.currentStep < this.steps.length - 1) {
                this.showStep(this.currentStep + 1);
            }
        }
    }
    
    prevStep() {
        if (this.currentStep > 0) {
            this.saveCurrentStepData();
            this.showStep(this.currentStep - 1);
        }
    }
    
    validateCurrentStep() {
        const currentStep = this.steps[this.currentStep];
        const requiredFields = currentStep.querySelectorAll("[required]");
        let isValid = true;
        
        requiredFields.forEach(field => {
            if (!field.value.trim()) {
                field.classList.add("error");
                isValid = false;
            } else {
                field.classList.remove("error");
            }
        });
        
        return isValid;
    }
    
    saveCurrentStepData() {
        const currentStep = this.steps[this.currentStep];
        const stepData = new FormData(currentStep);
        
        for (let [key, value] of stepData.entries()) {
            this.formData[key] = value;
        }
    }
}

Summary ​

Key points of JavaScript form handling:

  1. Form Element Access: Access form elements by ID, form object, or collection operations
  2. Event Handling: submit, input, focus, blur, change events
  3. Data Processing: FormData object, manual data building, data conversion
  4. Form Validation: HTML5 built-in validation, JavaScript validation, custom validation rules
  5. Dynamic Forms: Dynamic field addition, conditional fields, dynamic form management
  6. Best Practices: Progressive enhancement, accessibility optimization, user experience improvements
  7. Practical Applications: User registration forms, multi-step forms, complex form management

Mastering form handling techniques is fundamental to creating interactive web applications. In the next chapter, we will learn about JavaScript code standards.

Content is for learning and research only.

Copyright 2026 Kenhuang Academy. All Rights Reserved. About