✅ Form Validation — Galat Data Roko

<!-- Required — field empty nahi ho sakta -->
<input type="text" name="name" required>
<input type="email" required>

<!-- Min/Max length -->
<input type="password" minlength="8" maxlength="50">

<!-- Min/Max value (numbers) -->
<input type="number" min="1" max="10" step="1">

<!-- Pattern — regex validation -->
<input type="tel" 
  pattern="[0-9]{10}" 
  title="Exactly 10 digit number daalo"
  placeholder="9876543210">

<!-- Pattern for Indian phone -->
<input type="tel" 
  pattern="[6-9][0-9]{9}" 
  title="Indian mobile: 6-9 se start, 10 digits">

<!-- Pattern for name (sirf letters aur spaces) -->
<input type="text" 
  pattern="[A-Za-z\s]{2,50}" 
  title="Sirf letters aur spaces, 2-50 characters">

<!-- Email pattern (strict) -->
<input type="email" 
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

<!-- Custom validation message -->
<input type="text" id="pincode" 
  pattern="[1-9][0-9]{5}" 
  title="6 digit pincode, 0 se start nahi hoga">

<!-- Form-level validation -->
<form id="orderForm" novalidate>
  <input type="text" required>
  <input type="email" required>
  <button type="submit">Submit</button>
</form>

<script>
// novalidate = browser ka default popup disable
// Custom messages ke liye JS validation use karo

const form = document.getElementById('orderForm');
const pincode = document.getElementById('pincode');

// Custom error message
pincode.addEventListener('input', function() {
  if (this.value && !this.validity.valid) {
    this.setCustomValidity('6 digit pincode daalo, 0 se start nahi hoga');
  } else {
    this.setCustomValidity('');
  }
});

// Manual validation check
form.addEventListener('submit', function(e) {
  e.preventDefault();
  if (form.checkValidity()) {
    // Sab valid — submit
    console.log('Form valid hai!');
  } else {
    // Errors dikhao
    form.reportValidity();
  }
});

// Single field check
if (pincode.checkValidity()) {
  console.log('Pincode valid hai');
}
</script>

<!-- CSS for validation states -->
<style>
  input:invalid {
    border: 2px solid #ef4444;
  }
  input:valid {
    border: 2px solid #10b981;
  }
  input:required {
    border-left: 4px solid #f59e0b;
  }
  input:placeholder-shown {
    border-color: #94a3b8;
  }
</style>