HTML <textarea> required एट्रिब्यूट: अनिवार्य फील्ड

<textarea> required एट्रिब्यूट

required एट्रिब्यूट एक बूलियन एट्रिब्यूट है जो निर्दिष्ट करता है कि फॉर्म सबमिट करने से पहले टेक्स्टएरिया भरना अनिवार्य है। यदि उपयोगकर्ता खाली छोड़कर सबमिट करने का प्रयास करता है, तो ब्राउज़र मूल वैलिडेशन संदेश दिखाता है और सबमिशन रोक देता है।

सिंटैक्स

<textarea required></textarea>

उदाहरण: टिप्पणी अनिवार्य फॉर्म

<!DOCTYPE html>
<html>
<body>
  <h2>विषय-वार रैंक</h2>
  <form action="">
    <label for="student">छात्र:</label>
    <input type="text" id="student" required><br>
    <label for="subject">विषय:</label>
    <input type="text" id="subject" required><br>
    <label for="rank">रैंक:</label>
    <input type="number" id="rank" required><br>
    <label for="marks">अंक:</label>
    <input type="number" id="marks" required><br>
    <label for="remarks">टिप्पणी</label><br>
    <textarea rows="6" cols="70" id="remarks" required></textarea><br>
    <input type="submit" value="सबमिट">
  </form>
</body>
</html>

आउटपुट

यदि "टिप्पणी" टेक्स्टएरिया खाली छोड़कर सबमिट क्लिक किया जाए, तो ब्राउज़र चेतावनी दिखाएगा: "कृपया इस फ़ील्ड को भरें।" और फॉर्म सबमिट नहीं होगा।

कोड व्याख्या

<textarea rows="6" cols="70" required></textarea>

ब्राउज़र वैलिडेशन UI

• लाल बॉर्डर/आउटलाइन खाली फील्ड पर
• टूलटिप/बबल संदेश: "कृपया इस फ़ील्ड को भरें"
• फोकस स्वतः खाली फील्ड पर जाता है
• :invalid CSS छद्म-वर्ग से स्टाइल कर सकते हैं

CSS स्टाइलिंग

textarea:required {
  border-left: 3px solid red;
}

textarea:invalid {
  background-color: #fff0f0;
}

textarea:valid {
  background-color: #f0fff0;
}

सर्वर-साइड वैलिडेशन अभी भी आवश्यक

नोवैलिडेट से बायपास

<form novalidate>...</form>
<button type="submit" formnovalidate>बिना वैलिडेशन सबमिट</button>