🚀 Bài 4B: HTML Forms Nâng Cao

<!-- DISABLED - Không tương tác được, không submit -->
<input type="text" name="userId" value="USER_123" disabled>

<!-- READONLY - Có thể copy, được submit -->
<input type="text" name="createdDate" value="2025-01-15" readonly>

<!-- PATTERN - Validation với Regex -->
<input type="text" name="phone" 
       pattern="[0-9]{4}-[0-9]{3}-[0-9]{3}" 
       placeholder="0123-456-789"
       title="Format: 0123-456-789">

<!-- MINLENGTH/MAXLENGTH -->
<input type="text" name="username" 
       minlength="3" 
       maxlength="20" 
       required>

<!-- MIN/MAX/STEP -->
<input type="number" name="age" 
       min="18" 
       max="100" 
       step="1">

<!-- AUTOCOMPLETE -->
<input type="email" name="email" 
       autocomplete="email">
<input type="text" name="address" 
       autocomplete="street-address">

<!-- AUTOFOCUS -->
<input type="text" name="search" autofocus>

// Get/Set disabled
const input = document.getElementById('myInput');
console.log(input.disabled); // true/false
input.disabled = true; // Disable
input.disabled = false; // Enable

// Get/Set readonly
input.readOnly = true; // Readonly
input.readOnly = false; // Editable

// Get/Set required
input.required = true;

// Get/Set pattern
input.pattern = '[A-Za-z0-9]{3,20}';

// Get/Set min/max/step
input.min = '18';
input.max = '100';
input.step = '5';

// Get/Set minLength/maxLength
input.minLength = 3;
input.maxLength = 20;

// Check validity
console.log(input.validity.valid); // true/false
console.log(input.validationMessage); // Error message

// Custom validation
input.setCustomValidity('Lỗi tùy chỉnh!');
input.setCustomValidity(''); // Clear error

<!-- Date input - Chọn ngày -->
<input type="date" name="birthdate" min="1950-01-01" max="2005-12-31">

<!-- Time input - Chọn giờ -->
<input type="time" name="appointment" min="08:00" max="18:00">

<!-- Datetime-local input - Chọn ngày + giờ -->
<input type="datetime-local" name="event_time">

<!-- Week input - Chọn tuần -->
<input type="week" name="work_week">

<!-- Month input - Chọn tháng/năm (dùng cho thẻ tín dụng) -->
<input type="month" name="card_expiry">

<!-- Range slider - Âm lượng, độ ưu tiên -->
<input type="range" name="volume" min="0" max="100" value="50">

<!-- Color picker - Chọn màu chủ đạo -->
<input type="color" name="theme_color" value="#667eea">

<!-- File upload - Avatar (single file) -->
<input type="file" name="avatar" accept="image/*">

<!-- File upload - Documents (multiple files) -->
<input type="file" name="documents" multiple accept=".pdf,.doc,.docx">

<!-- Search input - Tìm kiếm -->
<input type="search" name="query" placeholder="Tìm kiếm...">

<!-- URL input - Website link -->
<input type="url" name="website" placeholder="https://example.com">

<!-- Tel input - Số điện thoại -->
<input type="tel" name="phone" placeholder="0123456789" pattern="[0-9]{10}">

// Date input - Tính tuổi
dateInput.addEventListener('change', function(e) {
  const birthDate = new Date(e.target.value);
  const today = new Date();
  const age = Math.floor((today - birthDate) / (365.25 * 24 * 60 * 60 * 1000));
  
  console.log('Age:', age);
});

// Range input - Realtime value
rangeInput.addEventListener('input', function(e) {
  const value = e.target.value;
  document.getElementById('displayValue').textContent = value;
});

// Color picker
colorInput.addEventListener('change', function(e) {
  const color = e.target.value;
  document.body.style.setProperty('--theme-color', color);
});

// File input - Đọc thông tin files
fileInput.addEventListener('change', function(e) {
  const files = e.target.files;
  
  Array.from(files).forEach(file => {
    console.log('File:', file.name);
    console.log('Size:', file.size, 'bytes');
    console.log('Type:', file.type);
  });
});

<form>
  <fieldset>
    <legend>Thông tin cá nhân</legend>
    
    <label for="firstName">Họ:</label>
    <input type="text" id="firstName" name="firstName" required>
    
    <label for="lastName">Tên:</label>
    <input type="text" id="lastName" name="lastName" required>
  </fieldset>
  
  <fieldset disabled>
    <legend>Thông tin hệ thống (chỉ đọc)</legend>
    
    <label>User ID:</label>
    <input type="text" value="USER_12345" readonly>
  </fieldset>
</form>

// Enable/Disable fieldset
function toggleFieldset(fieldsetId, enable) {
  const fieldset = document.getElementById(fieldsetId);
  fieldset.disabled = !enable;
}

// Validate từng fieldset
function validateFieldset(fieldset) {
  const inputs = fieldset.querySelectorAll('input[required]');
  let isValid = true;
  
  inputs.forEach(input => {
    if (!input.value.trim()) {
      input.classList.add('error');
      isValid = false;
    } else {
      input.classList.remove('error');
    }
  });
  
  return isValid;
}

// Cách đơn giản nhất - FormData API
const form = document.getElementById('myForm');

// Method 1: Get all data as object
form.addEventListener('submit', function(e) {
  e.preventDefault();
  
  const formData = new FormData(this);
  const data = Object.fromEntries(formData);
  
  console.log(data);
  // {username: "john", email: "john@mail.com", age: "25"}
});

// Method 2: Iterate FormData
formData.forEach((value, key) => {
  console.log(key, value);
});

// Method 3: Get specific field
const username = formData.get('username');
const files = formData.getAll('photos'); // Multiple files

// Cách cũ - truy cập từng input
const form = document.getElementById('myForm');

const data = {
  username: form.elements.username.value,
  email: form.elements.email.value,
  age: form.elements.age.value
};

// Hoặc dùng querySelector
const username = form.querySelector('[name="username"]').value;

// Hoặc getElementById
const email = document.getElementById('email').value;

// Function serialize form to JSON
function serializeForm(form) {
  const formData = new FormData(form);
  const data = {};
  
  for (let [key, value] of formData.entries()) {
    // Handle multiple values (checkboxes)
    if (data[key]) {
      if (!Array.isArray(data[key])) {
        data[key] = [data[key]];
      }
      data[key].push(value);
    } else {
      data[key] = value;
    }
  }
  
  return data;
}

// Usage
const jsonData = serializeForm(form);
console.log(JSON.stringify(jsonData, null, 2));

// Get all checked checkboxes
const hobbies = Array.from(
  form.querySelectorAll('input[name="hobbies"]:checked')
).map(cb => cb.value);

// Get selected radio
const gender = form.querySelector('input[name="gender"]:checked')?.value;

// Get select value
const country = form.querySelector('select[name="country"]').value;

// Get select text (not value)
const select = form.querySelector('select[name="country"]');
const selectedText = select.options[select.selectedIndex].text;

// Get file(s) from input
const fileInput = form.querySelector('input[type="file"]');
const files = fileInput.files; // FileList

// Single file
const file = files[0];
console.log('Name:', file.name);
console.log('Size:', file.size, 'bytes');
console.log('Type:', file.type);

// Multiple files
Array.from(files).forEach(file => {
  console.log(file.name);
});

// Read file content
const reader = new FileReader();
reader.onload = function(e) {
  console.log('File content:', e.target.result);
};
reader.readAsText(file); // or readAsDataURL() for images

// Validity State API
const input = document.getElementById('email');

// Check validity
console.log(input.validity.valid); // true/false

// Validity properties
console.log(input.validity.valueMissing);  // required field empty
console.log(input.validity.typeMismatch);   // wrong type (email)
console.log(input.validity.patternMismatch); // pattern không match
console.log(input.validity.tooLong);        // vượt maxlength
console.log(input.validity.tooShort);       // dưới minlength
console.log(input.validity.rangeUnderflow); // dưới min
console.log(input.validity.rangeOverflow);  // trên max
console.log(input.validity.stepMismatch);   // không đúng step

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

// Set custom error
input.setCustomValidity('Email này đã tồn tại!');

// Clear custom error
input.setCustomValidity('');

// Check form validity
const form = document.getElementById('myForm');
console.log(form.checkValidity()); // Validate toàn bộ form

// 1. Validate Required Field
function validateRequired(input) {
  if (!input.value.trim()) {
    input.setCustomValidity('Field này là bắt buộc!');
    return false;
  }
  input.setCustomValidity('');
  return true;
}

// 2. Validate Email
function validateEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!regex.test(email)) {
    return { valid: false, message: 'Email không đúng định dạng!' };
  }
  return { valid: true };
}

// 3. Validate Phone (Vietnam)
function validatePhone(phone) {
  const regex = /^(0|\+84)[0-9]{9}$/;
  if (!regex.test(phone)) {
    return { valid: false, message: 'SĐT phải 10 số, bắt đầu bằng 0' };
  }
  return { valid: true };
}

// 4. Validate Age Range
function validateAge(age, min = 18, max = 100) {
  const numAge = parseInt(age);
  if (isNaN(numAge)) {
    return { valid: false, message: 'Tuổi phải là số!' };
  }
  if (numAge < min) {
    return { valid: false, message: `Tuổi phải >= ${min}` };
  }
  if (numAge > max) {
    return { valid: false, message: `Tuổi phải <= ${max}` };
  }
  return { valid: true };
}

// 5. Validate Password Match
function validatePasswordMatch(password, confirmPassword) {
  if (password !== confirmPassword) {
    return { valid: false, message: 'Mật khẩu không khớp!' };
  }
  return { valid: true };
}

// 6. Validate File (type & size)
function validateFile(file, allowedTypes, maxSize) {
  // Check type
  if (!allowedTypes.includes(file.type)) {
    return { 
      valid: false, 
      message: `Chỉ chấp nhận: ${allowedTypes.join(', ')}` 
    };
  }
  
  // Check size (maxSize in MB)
  const maxBytes = maxSize * 1024 * 1024;
  if (file.size > maxBytes) {
    return { 
      valid: false, 
      message: `File quá lớn! Max: ${maxSize}MB` 
    };
  }
  
  return { valid: true };
}

// 7. Show/Hide Error Message
function showError(input, message) {
  // Remove existing error
  const existingError = input.parentElement.querySelector('.error-message');
  if (existingError) {
    existingError.remove();
  }
  
  // Add new error
  const errorDiv = document.createElement('div');
  errorDiv.className = 'error-message';
  errorDiv.style.color = 'red';
  errorDiv.style.fontSize = '0.85em';
  errorDiv.style.marginTop = '5px';
  errorDiv.textContent = message;
  
  input.parentElement.appendChild(errorDiv);
  input.style.borderColor = 'red';
}

function clearError(input) {
  const errorDiv = input.parentElement.querySelector('.error-message');
  if (errorDiv) {
    errorDiv.remove();
  }
  input.style.borderColor = 'green';
}