JavaScript से खाली इनपुट फील्ड्स के लिए फॉर्म वैलिडेशन कैसे जोड़ें?

JavaScript का उपयोग करके खाली इनपुट फील्ड्स के लिए फॉर्म वैलिडेशन जोड़ने का कोड नीचे दिया गया है।

उदाहरण

<!DOCTYPE html> 
<html> 
<head></head> 
<h1>JavaScript खाली इनपुट फील्ड वैलिडेशन उदाहरण</h1> 
<form name="Form1" onsubmit="return emptyValidation()" required> 
  नाम: <input type="text" name="firstName" /> 
  <input type="submit" value="सबमिट" /> 
</form> 
<h2>फॉर्म को खाली सबमिट करके वैलिडेशन देखें</h2> 
<script> 
  function emptyValidation() { 
    var formField = document.forms["Form1"]["firstName"].value; 
    if (formField == "" || x == null) { 
      alert("नाम भरा जाना चाहिए"); 
      return false; 
    } 
  } 
</script> 
</body> 
</html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

फॉर्म को खाली सबमिट करने पर:

⚠️ कोड में बग:

उदाहरण कोड में x == null है लेकिन x परिभाषित नहीं है। सही कोड:

function emptyValidation() { 
  var formField = document.forms["Form1"]["firstName"].value; 
  if (formField == "" || formField == null) { 
    alert("नाम भरा जाना चाहिए"); 
    return false; 
  } 
  return true; // सफलता पर true लौटाएं
}

आधुनिक HTML5 वैलिडेशन (JavaScript के बिना):

<form> 
  <input type="text" name="firstName" required /> 
  <input type="submit" value="सबमिट" /> 
</form>

• required एट्रिब्यूट - ब्राउज़र खुद वैलिडेट करता है
• pattern - रेगेक्स पैटर्न वैलिडेशन
• minlength/maxlength - लंबाई वैलिडेशन
• type="email", type="url" - बिल्ट-इन फॉर्मेट वैलिडेशन

JavaScript वैलिडेशन (कस्टम फीडबैक के लिए):

const form = document.forms["Form1"];
const input = form["firstName"];

form.addEventListener('submit', (e) => {
  if (!input.value.trim()) {
    e.preventDefault(); // सबमिशन रोकें
    input.classList.add('invalid');
    showError(input, 'नाम आवश्यक है');
  }
});

input.addEventListener('input', () => {
  input.classList.remove('invalid');
  hideError(input);
});

function showError(input, message) {
  // एरर मैसेज एलिमेंट बनाएं/दिखाएं
}

function hideError(input) {
  // एरर मैसेज छुपाएं
}

Constraint Validation API:

const input = document.querySelector('input[required]');

console.log(input.validity.valid);        // true/false
console.log(input.validity.valueMissing); // true अगर खाली
console.log(input.validity.tooShort);     // true अगर minlength से कम
console.log(input.validity.patternMismatch); // true अगर pattern मैच नहीं

input.setCustomValidity('कस्टम एरर मैसेज');
input.reportValidity(); // UI दिखाएं

बेस्ट प्रैक्टिस:

• HTML5 वैलिडेशन का उपयोग करें बेसिक चेक्स के लिए
• JavaScript जोड़ें कस्टम UX, क्रॉस-फील्ड वैलिडेशन, एसिंक वैलिडेशन के लिए
• सर्वर-साइड वैलिडेशन हमेशा करें
• एक्सेसिबल एरर मैसेजेस (aria-describedby, role="alert")