जावास्क्रिप्ट में HTML5 आवश्यक विशेषता कैसे सेट करें?

Question

मैं जावास्क्रिप्ट में आवश्यकतानुसार एक textइनपुट बॉक्स को चिह्नित करने का प्रयास कर रहा हूं ।

<input id="edName" type="text" id="name">

यदि फ़ील्ड को शुरू में चिह्नित किया गया है required:

<form>
    <input id="edName" type="text" id="name" required><br>
    <input type="submit" value="Search">
</form>

जब उपयोगकर्ता सबमिट करने का प्रयास करता है तो उन्हें एक सत्यापन त्रुटि दी जाती है:

लेकिन अब मैं जावास्क्रिप्ट के माध्यम requiredसे "रनटाइम" पर विशेषता सेट करना चाहता हूं :

<form>
    <input id="edName" type="text" id="name"><br>
    <input type="submit" value="Search">
</form>

इसी स्क्रिप्ट के साथ:

//recommended W3C HTML5 syntax for boolean attributes
document.getElementById("edName").attributes["required"] = "";         

सिवाय जब मैं अभी जमा करता हूं, तो कोई सत्यापन जांच नहीं है, कोई ब्लॉक नहीं है।

HTML5 सत्यापन बूलियन विशेषता सेट करने का सही तरीका क्या है ?

jsFiddle

विशेषता का मूल्य क्या है, आप पूछें?

HTML5 सत्यापन requiredविशेषता के रूप में प्रलेखित है Boolean:

4.10.7.3.4 requiredविशेषता

requiredविशेषता एक है बूलियन विशेषता । निर्दिष्ट होने पर, तत्व की आवश्यकता होती है।

एक booleanविशेषता को कैसे परिभाषित किया जाए, इसके बारे में बहुत कुछ लिखा गया है । HTML5 कल्पना नोट:

एक तत्व पर एक बूलियन विशेषता की उपस्थिति सही मूल्य का प्रतिनिधित्व करती है, और विशेषता की अनुपस्थिति झूठे मूल्य का प्रतिनिधित्व करती है।

यदि विशेषता मौजूद है, तो इसका मान या तो खाली स्ट्रिंग होना चाहिए या ऐसा मान होना चाहिए जो विशेषता के विहित नाम के लिए ASCII केस-असंवेदनशील मेल है, जिसमें कोई अग्रणी या अनुगामी व्हॉट्सएप नहीं है।

इसका मतलब है कि आप एक required बूलियन विशेषता को दो अलग-अलग तरीकों से निर्दिष्ट कर सकते हैं :

edName.attributes.required = ""; //the empty string
edName.attributes.required = "required"; //the attribute's canonical name

लेकिन वास्तव में विशेषता का मूल्य क्या है ?

जब आप इस समस्या के बारे में मेरी jsFiddle को देखते हैं, तो आप देखेंगे कि यदि requiredविशेषता मार्कअप में परिभाषित की गई है:

<input id="edName" type="text" id="name" required>

तब विशेषता के मूल्य है नहीं रिक्त स्ट्रिंग, और न ही विशेषता का प्रामाणिक नाम:

edName.attributes.required = [object Attr]

इससे समाधान हो सकता है।

Comments

मुझे समझ में नहीं आता कि वे अनुमति क्यों नहीं देते required="false", क्या उन्होंने कभी मानक लिखने से पहले एक टेम्पलेट लिखा था? सशर्त विशेषताएँ आमतौर पर एक दर्द होती हैं, यह आसान है कि विशेषता मूल्य में सिर्फ बूलियन डाल दिया जाए ...

— क्रिस्टोफ़ रूसो

क्या यह संभव है कि पाठ मैन्युअल रूप से आवश्यक इनपुट पर दिखाए: "कृपया इस क्षेत्र को भरें"?

— जिग्मंटस

Answer 1

requiredएक है परिलक्षित संपत्ति (जैसे id, name, type, और इस तरह), तो:

element.required = true;

... elementवास्तविक inputDOM तत्व कहां है , उदा:

document.getElementById("edName").required = true;

---

(सिर्फ पूर्णता के लिए)

पुन:

फिर विशेषता का मान रिक्त स्ट्रिंग नहीं है, और न ही विशेषता का विहित नाम:

edName.attributes.required = [object Attr]

ऐसा इसलिए requiredहै क्योंकि उस कोड में एक विशेषता ऑब्जेक्ट है , न कि एक स्ट्रिंग; attributesएक है NamedNodeMapजिनके मान रहे हैं Attrवस्तुओं । उनमें से किसी एक का मान प्राप्त करने के लिए, आप उसकी valueसंपत्ति देखेंगे । लेकिन बूलियन विशेषता के लिए, मूल्य प्रासंगिक नहीं है; विशेषता या तो मानचित्र (सत्य) में मौजूद है या मौजूद नहीं है (झूठी)।

इसलिए यदि आप परिलक्षित required नहीं होते हैं , तो आप इसे विशेषता जोड़कर सेट करेंगे:

element.setAttribute("required", "");

... जो के बराबर है element.required = true। आप इसे पूरी तरह से हटाकर साफ़ कर देंगे:

element.removeAttribute("required");

... जो के बराबर है element.required = false।

लेकिन हमें ऐसा नहीं करना है required, क्योंकि यह प्रतिबिंबित है।

Comments

क्या आप .prop के बारे में कुछ यहाँ जोड़ सकते हैं?

— mplungjan

@mplungjan - मुझे यकीन नहीं है कि आपका क्या मतलब है ...? jQuery?

— टीजे क्राउडर

हां, क्योंकि यह भ्रामक है कि ठेस डोम में काम नहीं करता है

— mplungjan

Answer 2

लघु संस्करण

element.setAttribute("required", "");    //turns required on
element.required = true;                 //turns required on through reflected attribute
jQuery(element).attr('required', '');    //turns required on
$("#elementId").attr('required', '');    //turns required on

element.removeAttribute("required");     //turns required off
element.required = false;                //turns required off through reflected attribute
jQuery(element).removeAttr('required');  //turns required off
$("#elementId").removeAttr('required');  //turns required off

if (edName.hasAttribute("required")) { }  //check if required
if (edName.required) { }                 //check if required using reflected attribute

दीर्घ संस्करण

एक बार टीजे क्राउडर परिलक्षित गुणों को इंगित करने में कामयाब रहे , मैंने सीखा कि सिंटैक्स का पालन करना गलत है :

element.attributes["name"] = value; //bad! Overwrites the HtmlAttribute object
element.attributes.name = value;    //bad! Overwrites the HtmlAttribute object
value = element.attributes.name;    //bad! Returns the HtmlAttribute object, not its value
value = element.attributes["name"]; //bad! Returns the HtmlAttribute object, not its value

आपको अवश्य जाना चाहिएelement.getAttribute और element.setAttribute:

element.getAttribute("foo");         //correct
element.setAttribute("foo", "test"); //correct

ऐसा इसलिए है क्योंकि विशेषता में वास्तव में एक विशेष HtmlAttribute ऑब्जेक्ट है:

element.attributes["foo"];           //returns HtmlAttribute object, not the value of the attribute
element.attributes.foo;              //returns HtmlAttribute object, not the value of the attribute

एक विशेषता मान को "सही" पर सेट करके, आप गलती से इसे String ऑब्जेक्ट पर सेट कर रहे हैं , बजाय HtmlAttribute ऑब्जेक्ट के इसके लिए:

element.attributes["foo"] = "true";  //error because "true" is not a HtmlAttribute object
element.setAttribute("foo", "true"); //error because "true" is not an HtmlAttribute object

वैचारिक रूप से सही विचार (टाइप की गई भाषा में व्यक्त), है:

HtmlAttribute attribute = new HtmlAttribute();
attribute.value = "";
element.attributes["required"] = attribute;

इसलिए:

• getAttribute(name)
• setAttribute(name, value)

मौजूद। वे HtmlAttribute ऑब्जेक्ट के अंदर मान निर्दिष्ट करने पर कार्य करते हैं।

इसके ऊपर, कुछ विशेषता परिलक्षित होती है । इसका मतलब है कि आप उन्हें जावास्क्रिप्ट से अधिक अच्छी तरह से एक्सेस कर सकते हैं:

//Set the required attribute
//element.setAttribute("required", ""); 
element.required = true;

//Check the attribute
//if (element.getAttribute("required")) {...}
if (element.required) {...}

//Remove the required attribute
//element.removeAttribute("required");
element.required = false;

जो आप नहीं करना चाहते हैं वह गलती से .attributesसंग्रह का उपयोग करें :

element.attributes.required = true;     //WRONG!
if (element.attributes.required) {...}  //WRONG!
element.attributes.required = false;    //WRONG!

परीक्षण परीक्षण

इसने एक requiredविशेषता के उपयोग के इर्द-गिर्द परीक्षण किया , जो कि गुण के माध्यम से लौटाए गए मूल्यों और परावर्तित संपत्ति की तुलना करता है

document.getElementById("name").required;
document.getElementById("name").getAttribute("required");

परिणामों के साथ:

HTML                         .required        .getAttribute("required")
==========================   ===============  =========================
<input>                      false (Boolean)  null (Object)
<input required>             true  (Boolean)  "" (String)
<input required="">          true  (Boolean)  "" (String)
<input required="required">  true  (Boolean)  "required" (String)
<input required="true">      true  (Boolean)  "true" (String)
<input required="false">     true  (Boolean)  "false" (String)
<input required="0">         true  (Boolean)  "0" (String)

.attributesसंग्रह को सीधे एक्सेस करने की कोशिश करना गलत है। यह DOM विशेषता का प्रतिनिधित्व करने वाली वस्तु लौटाता है:

edName.attributes["required"] => [object Attr]
edName.attributes.required    => [object Attr]

यह बताता है कि आपको कभी भी .attributesसंग्रह से सीधे बात क्यों नहीं करनी चाहिए । आप विशेषताओं के मूल्यों में हेरफेर नहीं कर रहे हैं , लेकिन ऑब्जेक्ट जो स्वयं विशेषताओं का प्रतिनिधित्व करते हैं।

कैसे सेट करें आवश्यक?

requiredएक विशेषता पर सेट करने का सही तरीका क्या है ? आपके पास दो विकल्प हैं, या तो परिलक्षित संपत्ति , या विशेषता को सही ढंग से सेट करने के माध्यम से:

element.setAttribute("required", "");         //Correct
edName.required = true;                       //Correct

कड़ाई से बोलते हुए, कोई भी अन्य गुण विशेषता को "सेट" करेगा। लेकिन Booleanविशेषताओं की परिभाषा निर्धारित करती है कि इसे केवल सच्चे"" संकेत के लिए खाली स्ट्रिंग पर सेट किया जाना चाहिए । सब काम निम्न विधियों को सेट बूलियन विशेषता, required

लेकिन उनका उपयोग न करें :

element.setAttribute("required", "required"); //valid, but not preferred
element.setAttribute("required", "foo");      //works, but silly
element.setAttribute("required", "true");     //Works, but don't do it, because:
element.setAttribute("required", "false");    //also sets required boolean to true
element.setAttribute("required", false);      //also sets required boolean to true
element.setAttribute("required", 0);          //also sets required boolean to true

हमने पहले ही यह जान लिया कि विशेषता को सीधे सेट करने की कोशिश करना गलत है:

edName.attributes["required"] = true;       //wrong
edName.attributes["required"] = "";         //wrong
edName.attributes["required"] = "required"; //wrong
edName.attributes.required = true;          //wrong
edName.attributes.required = "";            //wrong
edName.attributes.required = "required";    //wrong

कैसे करने के लिए साफ़ हो आवश्यक है?

विशेषता को हटाने की कोशिश करते समय चाल requiredयह है कि गलती से इसे चालू करना आसान है:

edName.removeAttribute("required");     //Correct
edName.required = false;                //Correct

अमान्य तरीकों से:

edName.setAttribute("required", null);    //WRONG! Actually turns required on!
edName.setAttribute("required", "");      //WRONG! Actually turns required on!
edName.setAttribute("required", "false"); //WRONG! Actually turns required on!
edName.setAttribute("required", false);   //WRONG! Actually turns required on!
edName.setAttribute("required", 0);       //WRONG! Actually turns required on!

परिलक्षित .requiredसंपत्ति का उपयोग करते समय , आप इसे बंद करने के लिए किसी भी "गलत" मान का उपयोग कर सकते हैं , और इसे चालू करने के लिए सत्य मान। लेकिन सिर्फ स्पष्टता के लिए सच्चे और झूठ पर टिके रहें।

कैसे करने के लिए जाँच के लिए required?

.hasAttribute("required")विधि के माध्यम से विशेषता की उपस्थिति के लिए जाँच करें :

if (edName.hasAttribute("required"))
{
}

आप इसे बूलियन परावर्तित .requiredसंपत्ति के माध्यम से भी देख सकते हैं:

if (edName.required)
{
}

Comments

चर elementऔर के बीच अंतर क्या है edName?

— faintsignal

एक वह जगह है जहाँ मैं विशिष्ट तत्व नाम edName(जैसे नाम इनपुट बॉक्स) को जेनेरिक में बदलना भूल गया element।

— इयान बॉयड

"आपको अवश्य जाना चाहिएelement.getAttribute और element.setAttribute:" सिर्फ स्पष्टता के लिए, आप attributes NamedNodeMapएक विशेषता के मूल्य को बदलने के लिए उपयोग कर सकते हैं यदि आपको पता है कि विशेषता पहले से ही है, तो आप इसका उपयोग उस विशेषता को जोड़ने के लिए नहीं कर सकते हैं जो वहां नहीं है (या हटाने के लिए) एक) है। इसलिए यह दृष्टिकोण बूलियन विशेषताओं के लिए उपयोगी नहीं है requiredक्योंकि उनके साथ जो मायने रखता है वह यह है कि क्या वे वहां हैं, न कि उनका मूल्य क्या है। लेकिन हां, प्रतिबिंबित गुण आमतौर पर आसान होते हैं। :-)

— टीजे क्राउडर

Answer 3

क्या मायने रखता है विशेषता नहीं है, लेकिन संपत्ति , और इसका मूल्य एक बूलियन है।

आप इसका उपयोग करके सेट कर सकते हैं

 document.getElementById("edName").required = true;

Answer 4

और jquery संस्करण:

$('input').attr('required', true)
$('input').attr('required', false)

मुझे पता है कि यह सवाल से परे है, लेकिन शायद किसी को यह मददगार लगेगा :)

Comments

वास्तव में, :) के prop()बजाय का उपयोग करेंattr()

— Poul Kruijt

@PierreDuc यह 2019 है .. हम उपयोग नहीं करते हैं :) किसी भी अधिक

— a20

@ a20 पिछली बार जब मैंने जाँच की, मैं अभी भी इसका उपयोग कर रहा हूँ। इसलिए, मुझे लगता है कि आप गलत हैं

— पौल क्रुजित

मैं अपने भाई से मजाक कर रहा था .. सॉरी!

— a20

Answer 5

let formelems = document.querySelectorAll('input,textarea,select');
formelems.forEach((formelem) => {
  formelem.required = true;

});

यदि आप सभी इनपुट, टेक्सारिया बनाना चाहते हैं, और आवश्यक तत्वों का चयन करें।

Answer 6

इसे आज़माएं ..

document.getElementById("edName").required = true;