Forms & Validation

📝 Basic Form Handling

Forms are essential for user interaction. JavaScript provides powerful APIs to handle form submissions, input events, and form data collection.

JavaScript Editor

// Basic Form Handling
console.log("=== BASIC FORM HANDLING ===");

// Create a form dynamically
const formContainer = document.createElement('div');
formContainer.id = 'form-container';
formContainer.innerHTML = `
  <h3 style="color: #333; margin-bottom: 20px;">Registration Form</h3>
  <form id="registration-form" style="max-width: 400px;">
    <div style="margin-bottom: 15px;">
      <label for="name">Full Name:</label>
      <input type="text" id="name" name="name" 
             placeholder="Enter your full name"
             style="width: 100%; padding: 8px; margin-top: 5px;">
    </div>
    
    <div style="margin-bottom: 15px;">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" 
             placeholder="Enter your email"
             style="width: 100%; padding: 8px; margin-top: 5px;">
    </div>
    
    <div style="margin-bottom: 15px;">
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" 
             placeholder="Create a password"
             style="width: 100%; padding: 8px; margin-top: 5px;">
    </div>
    
    <div style="margin-bottom: 15px;">
      <label>Gender:</label><br>
      <label style="margin-right: 15px;">
        <input type="radio" name="gender" value="male"> Male
      </label>
      <label style="margin-right: 15px;">
        <input type="radio" name="gender" value="female"> Female
      </label>
      <label>
        <input type="radio" name="gender" value="other"> Other
      </label>
    </div>
    
    <div style="margin-bottom: 15px;">
      <label for="country">Country:</label>
      <select id="country" name="country" 
              style="width: 100%; padding: 8px; margin-top: 5px;">
        <option value="">Select a country</option>
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="ca">Canada</option>
        <option value="au">Australia</option>
        <option value="in">India</option>
      </select>
    </div>
    
    <div style="margin-bottom: 20px;">
      <label>
        <input type="checkbox" id="terms" name="terms"> 
        I agree to the terms and conditions
      </label>
    </div>
    
    <button type="submit" 
            style="padding: 10px 20px; background: #4caf50; color: white; 
                   border: none; border-radius: 4px; cursor: pointer;">
      Register
    </button>
    <button type="reset" 
            style="padding: 10px 20px; background: #f44336; color: white; 
                   border: none; border-radius: 4px; cursor: pointer; margin-left: 10px;">
      Reset
    </button>
  </form>
  
  <div id="form-output" style="margin-top: 20px; padding: 15px; 
                               background: #f5f5f5; display: none;">
    <h4>Form Data:</h4>
    <pre id="form-data" style="background: white; padding: 10px; 
                               border: 1px solid #ddd;"></pre>
  </div>
`;

formContainer.style.padding = '20px';
formContainer.style.backgroundColor = 'white';
formContainer.style.border = '1px solid #ddd';
formContainer.style.borderRadius = '5px';
document.body.appendChild(formContainer);

// Get form elements
const form = document.getElementById('registration-form');
const formOutput = document.getElementById('form-output');
const formDataDisplay = document.getElementById('form-data');

// Form submit event
form.addEventListener('submit', function(event) {
  event.preventDefault(); // Prevent page reload
  console.log("Form submitted!");
  
  // Get form data
  const formData = new FormData(form);
  const data = Object.fromEntries(formData);
  
  // Display form data
  console.log("Form data:", data);
  formDataDisplay.textContent = JSON.stringify(data, null, 2);
  formOutput.style.display = 'block';
  
  // Alternative: Access form elements directly
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  const gender = document.querySelector('input[name="gender"]:checked');
  const country = document.getElementById('country').value;
  const terms = document.getElementById('terms').checked;
  
  console.log("\nDirect access to values:");
  console.log("Name:", name);
  console.log("Email:", email);
  console.log("Password:", password);
  console.log("Gender:", gender ? gender.value : 'Not selected');
  console.log("Country:", country);
  console.log("Terms accepted:", terms);
});

// Input change events
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');

nameInput.addEventListener('input', function() {
  console.log("Name changed:", this.value);
});

nameInput.addEventListener('change', function() {
  console.log("Name finalized:", this.value);
});

emailInput.addEventListener('blur', function() {
  console.log("Email field lost focus:", this.value);
});

passwordInput.addEventListener('focus', function() {
  console.log("Password field focused");
});

// Select change
const countrySelect = document.getElementById('country');
countrySelect.addEventListener('change', function() {
  console.log("Country selected:", this.value);
});

// Radio button change
const genderRadios = document.querySelectorAll('input[name="gender"]');
genderRadios.forEach(radio => {
  radio.addEventListener('change', function() {
    console.log("Gender selected:", this.value);
  });
});

// Checkbox change
const termsCheckbox = document.getElementById('terms');
termsCheckbox.addEventListener('change', function() {
  console.log("Terms checkbox:", this.checked);
});

// Form reset
form.addEventListener('reset', function() {
  console.log("Form reset");
  formOutput.style.display = 'none';
});

Form Elements:

<input> - Text, email, password, etc.
<textarea> - Multi-line text
<select> - Dropdown menu
<button> - Submit/reset buttons

Form Events:

submit - Form submission
reset - Form reset
change - Value changed
input - Real-time input

✅ Form Validation

Validation ensures that users enter correct data. JavaScript provides both built-in HTML5 validation and custom validation logic.

JavaScript Editor

// Form Validation
console.log("=== FORM VALIDATION ===");

// Create validation form
const validationForm = document.createElement('div');
validationForm.id = 'validation-form';
validationForm.innerHTML = `
  <h3 style="color: #333; margin-bottom: 20px;">Validation Form</h3>
  <form id="validate-form" novalidate style="max-width: 400px;">
    <div style="margin-bottom: 15px;">
      <label for="val-name">Full Name *</label>
      <input type="text" id="val-name" name="val-name" 
             required minlength="3" maxlength="50"
             style="width: 100%; padding: 8px; margin-top: 5px;">
      <div id="name-error" class="error-message" 
           style="color: #f44336; font-size: 12px; display: none;"></div>
    </div>
    
    <div style="margin-bottom: 15px;">
      <label for="val-email">Email Address *</label>
      <input type="email" id="val-email" name="val-email" 
             required
             style="width: 100%; padding: 8px; margin-top: 5px;">
      <div id="email-error" class="error-message" 
           style="color: #f44336; font-size: 12px; display: none;"></div>
    </div>
    
    <div style="margin-bottom: 15px;">
      <label for="val-age">Age</label>
      <input type="number" id="val-age" name="val-age" 
             min="18" max="100"
             style="width: 100%; padding: 8px; margin-top: 5px;">
      <div id="age-error" class="error-message" 
           style="color: #f44336; font-size: 12px; display: none;"></div>
    </div>
    
    <div style="margin-bottom: 15px;">
      <label for="val-website">Website URL</label>
      <input type="url" id="val-website" name="val-website" 
             placeholder="https://example.com"
             style="width: 100%; padding: 8px; margin-top: 5px;">
      <div id="url-error" class="error-message" 
           style="color: #f44336; font-size: 12px; display: none;"></div>
    </div>
    
    <div style="margin-bottom: 20px;">
      <label for="val-bio">Bio (100 characters max)</label>
      <textarea id="val-bio" name="val-bio" rows="4" maxlength="100"
                style="width: 100%; padding: 8px; margin-top: 5px;"></textarea>
      <div id="bio-error" class="error-message" 
           style="color: #f44336; font-size: 12px; display: none;"></div>
      <div id="bio-counter" style="font-size: 12px; text-align: right; color: #666;">
        100 characters remaining
      </div>
    </div>
    
    <button type="submit" 
            style="padding: 10px 20px; background: #2196f3; color: white; 
                   border: none; border-radius: 4px; cursor: pointer;">
      Validate & Submit
    </button>
  </form>
  
  <div id="validation-result" style="margin-top: 20px; padding: 15px; 
                                     background: #f5f5f5; display: none;">
    <h4>Validation Result:</h4>
    <div id="result-message" style="padding: 10px;"></div>
  </div>
`;

validationForm.style.padding = '20px';
validationForm.style.backgroundColor = 'white';
validationForm.style.border = '1px solid #ddd';
validationForm.style.borderRadius = '5px';
validationForm.style.marginTop = '20px';
document.body.appendChild(validationForm);

// Get elements
const validateForm = document.getElementById('validate-form');
const validationResult = document.getElementById('validation-result');
const resultMessage = document.getElementById('result-message');

// Validation functions
function showError(inputId, message) {
  const errorElement = document.getElementById(`${inputId}-error`);
  const inputElement = document.getElementById(inputId);
  
  errorElement.textContent = message;
  errorElement.style.display = 'block';
  inputElement.style.borderColor = '#f44336';
  inputElement.style.backgroundColor = '#ffebee';
}

function hideError(inputId) {
  const errorElement = document.getElementById(`${inputId}-error`);
  const inputElement = document.getElementById(inputId);
  
  errorElement.style.display = 'none';
  inputElement.style.borderColor = '';
  inputElement.style.backgroundColor = '';
}

function validateAge() {
  const age = document.getElementById('val-age').value;
  if (age && (age < 18 || age > 100)) {
    showError('val-age', 'Age must be between 18 and 100');
    return false;
  }
  hideError('val-age');
  return true;
}

function validateBio() {
  const bio = document.getElementById('val-bio').value;
  if (bio.length > 100) {
    showError('val-bio', 'Bio cannot exceed 100 characters');
    return false;
  }
  hideError('val-bio');
  return true;
}

// Real-time validation
const valName = document.getElementById('val-name');
const valEmail = document.getElementById('val-email');
const valAge = document.getElementById('val-age');
const valWebsite = document.getElementById('val-website');
const valBio = document.getElementById('val-bio');

valName.addEventListener('blur', validateName);
valEmail.addEventListener('blur', validateEmail);
valAge.addEventListener('blur', validateAge);
valWebsite.addEventListener('blur', validateWebsite);
valBio.addEventListener('input', function() {
  const remaining = 100 - this.value.length;
  document.getElementById('bio-counter').textContent = 
    `${remaining} characters remaining`;
  validateBio();
});

// Form submission
validateForm.addEventListener('submit', function(event) {
  event.preventDefault();
  
  // Run all validations
  const isNameValid = validateName();
  const isEmailValid = validateEmail();
  const isAgeValid = validateAge();
  const isWebsiteValid = validateWebsite();
  const isBioValid = validateBio();
  
  const isValid = isNameValid && isEmailValid && isAgeValid && 
                  isWebsiteValid && isBioValid;
  
  if (isValid) {
    resultMessage.innerHTML = `
      <div style="color: #4caf50; padding: 10px; background: #e8f5e9; border-radius: 4px;">
        <strong>✅ Success!</strong><br>
        Form validation passed. All fields are valid.
      </div>
    `;
    console.log("Form validation passed!");
    
    // In real application, you would submit the form here
    // this.submit(); // Uncomment to actually submit
  } else {
    resultMessage.innerHTML = `
      <div style="color: #f44336; padding: 10px; background: #ffebee; border-radius: 4px;">
        <strong>❌ Validation Failed</strong><br>
        Please fix the errors highlighted in red.
      </div>
    `;
    console.log("Form validation failed!");
  }
  
  validationResult.style.display = 'block';
});

// Built-in constraint validation
console.log("\n=== BUILT-IN VALIDATION API ===");
console.log("checkValidity():", valName.checkValidity());
console.log("validationMessage:", valName.validationMessage);
console.log("validity.valid:", valName.validity.valid);
console.log("validity.valueMissing:", valName.validity.valueMissing);
console.log("validity.tooShort:", valName.validity.tooShort);
console.log("validity.typeMismatch:", valEmail.validity.typeMismatch);

Built-in HTML5 Validation:

required - Field must be filled
minlength/maxlength - Text length limits
min/max - Number range limits
pattern - Regex pattern matching
type="email/url" - Specific format

Validation API:

checkValidity() - Check if valid
reportValidity() - Show validation message
validity - Validation state object
validationMessage - Error message
setCustomValidity() - Custom error

🚀 Advanced Form Features

Modern forms can include dynamic fields, file uploads, auto-save functionality, and use the FormData API for efficient data handling.

JavaScript Editor

// Advanced Form Features
console.log("=== ADVANCED FORM FEATURES ===");

// Create advanced form
const advancedForm = document.createElement('div');
advancedForm.id = 'advanced-form';
advancedForm.innerHTML = `
  <h3 style="color: #333; margin-bottom: 20px;">Advanced Form Features</h3>
  
  <div style="background: #f8f9fa; padding: 20px; border-radius: 5px; margin-bottom: 20px;">
    <h4 style="margin-top: 0;">1. Dynamic Field Generation</h4>
    <form id="dynamic-form">
      <div id="field-container">
        <div class="field-group" style="margin-bottom: 10px;">
          <input type="text" placeholder="Enter a skill" class="skill-input" 
                 style="padding: 8px; width: 200px;">
          <button type="button" class="remove-field" 
                  style="padding: 8px; background: #f44336; color: white; border: none; 
                         border-radius: 4px; margin-left: 10px; cursor: pointer;">
            Remove
          </button>
        </div>
      </div>
      <button type="button" id="add-field" 
              style="padding: 8px 15px; background: #4caf50; color: white; 
                     border: none; border-radius: 4px; margin-top: 10px; cursor: pointer;">
        + Add Another Skill
      </button>
    </form>
    <div id="skills-output" style="margin-top: 15px; font-family: monospace;"></div>
  </div>
  
  <div style="background: #f8f9fa; padding: 20px; border-radius: 5px; margin-bottom: 20px;">
    <h4 style="margin-top: 0;">2. Form Data API</h4>
    <form id="formdata-example">
      <input type="text" name="username" placeholder="Username" 
             style="padding: 8px; margin-right: 10px;">
      <input type="email" name="email" placeholder="Email" 
             style="padding: 8px; margin-right: 10px;">
      <input type="file" name="avatar" 
             style="padding: 8px;">
    </form>
    <button id="show-formdata" 
            style="padding: 8px 15px; background: #2196f3; color: white; 
                   border: none; border-radius: 4px; margin-top: 10px; cursor: pointer;">
      Show FormData
    </button>
    <pre id="formdata-output" style="background: white; padding: 10px; border: 1px solid #ddd; 
                                     margin-top: 10px; display: none;"></pre>
  </div>
  
  <div style="background: #f8f9fa; padding: 20px; border-radius: 5px;">
    <h4 style="margin-top: 0;">3. Auto-save with Debouncing</h4>
    <textarea id="autosave-content" rows="6" 
              placeholder="Start typing... (auto-saves every 2 seconds)"
              style="width: 100%; padding: 10px; margin-bottom: 10px;"></textarea>
    <div id="autosave-status" style="font-size: 12px; color: #666;">
      Not saved yet
    </div>
    <button id="load-saved" 
            style="padding: 8px 15px; background: #ff9800; color: white; 
                   border: none; border-radius: 4px; margin-top: 10px; cursor: pointer;">
      Load Saved Content
    </button>
  </div>
`;

advancedForm.style.padding = '20px';
advancedForm.style.backgroundColor = 'white';
advancedForm.style.border = '1px solid #ddd';
advancedForm.style.borderRadius = '5px';
advancedForm.style.marginTop = '20px';
document.body.appendChild(advancedForm);

// 1. Dynamic Field Generation
const fieldContainer = document.getElementById('field-container');
const addFieldBtn = document.getElementById('add-field');
const skillsOutput = document.getElementById('skills-output');

function updateSkillsOutput() {
  const skills = Array.from(fieldContainer.querySelectorAll('.skill-input'))
    .map(input => input.value.trim())
    .filter(value => value.length > 0);
  
  skillsOutput.textContent = skills.length > 0 
    ? `Skills: ${skills.join(', ')}`
    : 'No skills added yet';
  console.log("Current skills:", skills);
}

addFieldBtn.addEventListener('click', function() {
  const fieldGroup = document.createElement('div');
  fieldGroup.className = 'field-group';
  fieldGroup.style.marginBottom = '10px';
  fieldGroup.innerHTML = `
    <input type="text" placeholder="Enter a skill" class="skill-input" 
           style="padding: 8px; width: 200px;">
    <button type="button" class="remove-field" 
            style="padding: 8px; background: #f44336; color: white; border: none; 
                   border-radius: 4px; margin-left: 10px; cursor: pointer;">
      Remove
    </button>
  `;
  
  fieldContainer.appendChild(fieldGroup);
  
  // Add event to new input
  const newInput = fieldGroup.querySelector('.skill-input');
  newInput.addEventListener('input', updateSkillsOutput);
  
  // Add event to remove button
  fieldGroup.querySelector('.remove-field').addEventListener('click', function() {
    fieldContainer.removeChild(fieldGroup);
    updateSkillsOutput();
  });
  
  console.log("New field added");
});

// Initialize first field
fieldContainer.querySelector('.skill-input').addEventListener('input', updateSkillsOutput);
fieldContainer.querySelector('.remove-field').addEventListener('click', function() {
  alert("Cannot remove the first field!");
});

// 2. FormData API
const formDataForm = document.getElementById('formdata-example');
const showFormDataBtn = document.getElementById('show-formdata');
const formDataOutput = document.getElementById('formdata-output');

showFormDataBtn.addEventListener('click', function() {
  const formData = new FormData(formDataForm);
  
  console.log("\n=== FormData API ===");
  console.log("FormData object:", formData);
  
  // Iterate through FormData
  let output = "FormData Contents:\n";
  for (let [key, value] of formData.entries()) {
    console.log(`${key}: ${value}`);
    output += `${key}: ${value}\n`;
  }
  
  // Convert to regular object
  const data = Object.fromEntries(formData);
  console.log("As plain object:", data);
  output += `\nAs plain object: ${JSON.stringify(data, null, 2)}`;
  
  formDataOutput.textContent = output;
  formDataOutput.style.display = 'block';
});

// 3. Auto-save with Debouncing
const autosaveContent = document.getElementById('autosave-content');
const autosaveStatus = document.getElementById('autosave-status');
const loadSavedBtn = document.getElementById('load-saved');

let saveTimeout;
let lastSavedContent = '';

autosaveContent.addEventListener('input', debounceSave);

loadSavedBtn.addEventListener('click', function() {
  if (lastSavedContent) {
    autosaveContent.value = lastSavedContent;
    autosaveStatus.textContent = 'Loaded saved content';
    autosaveStatus.style.color = '#2196f3';
    console.log("Loaded saved content");
  } else {
    autosaveStatus.textContent = 'No saved content found';
    autosaveStatus.style.color = '#f44336';
  }
});

// Load from localStorage on page load
window.addEventListener('load', function() {
  const saved = localStorage.getItem('autosave-content');
  if (saved) {
    autosaveContent.value = saved;
    lastSavedContent = saved;
    console.log("Loaded from localStorage:", saved);
  }
});

// Save to localStorage on page unload
window.addEventListener('beforeunload', function() {
  localStorage.setItem('autosave-content', autosaveContent.value);
  console.log("Saved to localStorage");
});

💡 Advanced Tips:

Use FormData API for file uploads and complex forms
Implement debouncing for auto-save features
Use localStorage for draft saving
Implement progressive enhancement
Add accessibility features (ARIA labels)

📋 Form Best Practices

User Experience:

Clear labels and placeholders
Inline validation feedback
Progress indicators for multi-step
Mobile-friendly design

Security:

Server-side validation (always!)
CSRF protection tokens
Input sanitization
HTTPS for sensitive data

Performance:

Debounce input handlers
Lazy validation
Optimize image/file handling
Use FormData for large forms

← Events Error Handling →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

Forms & Validation

📝 Basic Form Handling

Form Elements:

Form Events:

✅ Form Validation

Built-in HTML5 Validation:

Validation API:

🚀 Advanced Form Features

💡 Advanced Tips:

📋 Form Best Practices

User Experience:

Security:

Performance:

Follow Us

Our Tools

Our Company

Special Tools