HTML DOM Input Checkbox required Property - अनिवार्य चेकबॉक्स

HTML DOM Input Checkbox required Property

Input Checkbox required property यह निर्धारित करती है कि फॉर्म सबमिट करने के लिए चेकबॉक्स चेक करना अनिवार्य है या नहीं। यह boolean मान (true/false) प्राप्त या सेट करती है।

Syntax

आवश्यक स्थिति प्राप्त करना:

inputCheckboxObject.required

आवश्यक स्थिति सेट करना:

inputCheckboxObject.required = booleanValue

Boolean Values

उदाहरण

आवश्यक चेकबॉक्स के साथ फॉर्म सबमिशन वैलिडेशन:

<!DOCTYPE html>
<html>
<head>
<title>Required Attribute of Checkbox</title>
</head>
<body>
<form id="Form">
  <div> मुझे चेक करें! मैं आवश्यक हूँ: <input id="formCheckbox" type="checkbox" name="formCheckbox" required> </div>
</form>
<button onclick="getRequiredStatus()">जांचें कि फॉर्म सबमिट करने योग्य है या नहीं</button>
<div id="displayDiv"></div>
<script>
  function getRequiredStatus() {
    var requiredBool = document.getElementById("formCheckbox");
    var displayDiv = document.getElementById("displayDiv");
    if (requiredBool.required == false || (requiredBool.required == true && requiredBool.checked == true)) {
      displayDiv.textContent = 'चेकबॉक्स का आवश्यक attribute: ' + requiredBool.required + ', फॉर्म सबमिट करने योग्य है';
    } else {
      displayDiv.textContent = 'चेकबॉक्स चेक करें, required attribute का वर्तमान मान: ' + requiredBool.required;
    }
  }
</script>
</body>
</html>

आउटपुट

अनचेक्ड चेकबॉक्स के साथ "जांचें कि फॉर्म सबमिट करने योग्य है या नहीं" बटन क्लिक करने पर "चेकबॉक्स चेक करें" संदेश दिखाता है। चेक्ड चेकबॉक्स के साथ क्लिक करने पर "फॉर्म सबमिट करने योग्य है" दिखाता है।

मुख्य बिंदु

• required attribute HTML5 फॉर्म वैलिडेशन का हिस्सा है
• जब required=true हो, तो ब्राउज़र अनचेक्ड चेकबॉक्स के साथ फॉर्म सबमिट नहीं करने देगा
• JavaScript से checkbox.required द्वारा इसे पढ़/लिख सकते हैं
• सर्वर-साइड वैलिडेशन भी आवश्यक है क्योंकि क्लाइंट-साइड वैलिडेशन को बायपास किया जा सकता है
• CSS में :required और :optional pseudo-classes से स्टाइलिंग कर सकते हैं