জাভাস্ক্রিপ্টে 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"] = "";         

আমি এখন জমা দেওয়ার ব্যতীত কোনও বৈধতা যাচাই, কোনও ব্লক নেই।

এইচটিএমএল 5 বৈধতা বুলিয়ান বৈশিষ্ট্য সেট করার সঠিক উপায় কী ?

jsFizz

আপনি জিজ্ঞাসা গুণাবলী মান কি?

এইচটিএমএল 5 বৈধতা requiredবৈশিষ্ট্যটি একটি হিসাবে নথিভুক্ত করা হয়েছে Boolean:

4.10.7.3.4 requiredবৈশিষ্ট্য

requiredঅ্যাট্রিবিউটে একটি হল বুলিয়ান অ্যাট্রিবিউট । নির্দিষ্ট করার সময়, উপাদানটির প্রয়োজন হয়।

কোনও booleanগুণকে কীভাবে সংজ্ঞায়িত করা যায় সে সম্পর্কে অনেকগুলি হাত-ঘাটে রয়েছে । এইচটিএমএল 5 স্পষ্ট নোট:

কোনও উপাদানটিতে বুলিয়ান বৈশিষ্ট্যের উপস্থিতি প্রকৃত মানকে উপস্থাপন করে এবং বৈশিষ্ট্যের অনুপস্থিতি মিথ্যা মানকে উপস্থাপন করে।

যদি বৈশিষ্ট্যটি উপস্থিত থাকে তবে এর মানটি অবশ্যই শূন্য স্ট্রিং বা মান হিসাবে একটি এএসসিআইআই কেস-সংবেদনশীল মিল হতে হবে যার কোনও শীর্ষস্থানীয় বা অনুসরণীয় শ্বেত স্পেস নেই attrib

এর অর্থ হ'ল আপনি একটি required বুলিয়ান বৈশিষ্ট্য দুটি পৃথক উপায়ে নির্দিষ্ট করতে পারেন :

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

তবে গুণটির মানটি আসলে কী?

আপনি যখন এই সমস্যার আমার জেএসফিডেলটি দেখেন তখন আপনি খেয়াল করবেন যে যদি requiredবৈশিষ্ট্যটি মার্কআপে সংজ্ঞায়িত করা হয়:

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

তারপর অ্যাট্রিবিউট এর মান না খালি স্ট্রিং, কিংবা অ্যাট্রিবিউট প্রামাণ্য নামটি:

edName.attributes.required = [object Attr]

এটি একটি সমাধান হতে পারে।

Comments

বুঝতে পারছি না কেন তারা অনুমতি দেয় না required="false", তারা কি স্ট্যান্ডার্ড লেখার আগে কোনও টেম্পলেট লিখেছিল? শর্তসাপেক্ষ বৈশিষ্ট্যগুলি সাধারণত একটি ব্যথা হয়, সেই বুলিয়ানটিকে

— গুণকের মানটিতে

প্রয়োজনীয় ইনপুটটির মাধ্যমে কি সেই পাঠ্যটি ম্যানুয়ালি প্রদর্শন করা সম্ভব: "দয়া করে এটি এই ক্ষেত্রটি পূরণ করুন?"

— zygimantus

Answer 1

requiredএকটি হল প্রতিফলিত সম্পত্তি (যেমন id, name, typeএবং এই ধরনের), তাই:

element.required = true;

... elementপ্রকৃত inputDOM উপাদানটি কোথায় , যেমন:

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

---

(শুধু সম্পূর্ণতার জন্য।)

পুনঃ

তারপরে বৈশিষ্ট্যের মানটি খালি স্ট্রিং নয়, বা গুণকের নামটিও নয়:

edName.attributes.required = [object Attr]

কারণ এই কোডটিতেrequired একটি গুনযুক্ত বস্তু , কোনও স্ট্রিং নয়; যার মান attributesহ'ল বস্তু । এর মধ্যে একটির মান পেতে, আপনি এর সম্পত্তিটি দেখুন। তবে বুলিয়ান বৈশিষ্ট্যের জন্য, মানটি প্রাসঙ্গিক নয়; বৈশিষ্ট্যটি হয় মানচিত্রে উপস্থিত রয়েছে (সত্য) অথবা উপস্থিত নেই (মিথ্যা)।NamedNodeMapAttrvalue

সুতরাং যদি প্রতিফলিত required না হয়, আপনি এট্রিবিউট যুক্ত করে সেট করে দিতেন:

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

... যা এর সমতুল্য element.required = true। আপনি এটি সম্পূর্ণরূপে অপসারণ করে পরিষ্কার করতে চাই:

element.removeAttribute("required");

... যা এর সমতুল্য element.required = false।

তবে আমাদের এটি করার দরকার নেই required, কারণ এটি প্রতিফলিত হয়েছে।

Comments

আপনি এখানে .prop সম্পর্কে কিছু যুক্ত করতে পারেন?

— এমপ্লুংজন

@ এমপ্লুংজন - আপনারা কী বলতে চাইছেন তা আমি নিশ্চিত নই ...? jQuery?

— টিজে ক্রাউডার

হ্যাঁ, কারণ এটি বিভ্রান্তিকর যে

— প্রোড

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

এটি কারণ অ্যাট্রিবিউটটিতে আসলে একটি বিশেষ এইচটিএমএলঅ্যাট্রিবিউট অবজেক্ট থাকে:

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

"সত্য" -এর জন্য একটি অ্যাট্রিবিউট মান সেট করে, আপনি ভুলভাবে এটি স্ট্রিং অবজেক্টে সেট করছেন, এইচটিএমএলঅ্যাট্রিবিউট অবজেক্টের জন্য এটি প্রয়োজন:

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)

উপস্থিত। তারা এইচটিএমএলএন্ট্রিবিউট অবজেক্টটির ভিতরে মান নির্ধারণের কাজটি করে।

এর উপরে, কিছু বৈশিষ্ট্য প্রতিফলিত হয় । এর অর্থ আপনি জাভাস্ক্রিপ্ট থেকে আরও সুন্দরভাবে এগুলি অ্যাক্সেস করতে পারবেন:

//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সম্পত্তি ব্যবহার করার সময় , আপনি এটি বন্ধ করার জন্য কোনও "ভুয়া" মান এবং এটি চালু করার জন্য সত্যবাদী মানগুলিও ব্যবহার করতে পারেন । তবে স্বচ্ছতার জন্য কেবল দৃ stick়ভাবে আটকে থাকুন।

কিভাবে পরীক্ষা জন্য required?

.hasAttribute("required")পদ্ধতির মাধ্যমে বৈশিষ্ট্যের উপস্থিতি যাচাই করুন :

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

আপনি এটি বুলিয়ান প্রতিবিম্বিত .requiredবৈশিষ্ট্যের মাধ্যমেও পরীক্ষা করতে পারেন :

if (edName.required)
{
}

Comments

ভেরিয়েবল elementএবং এর মধ্যে পার্থক্য কী edName?

— অবাস্তব

একটি যেখানে আমি নির্দিষ্ট উপাদান নামটি 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()

— পৌল ক্রুইজ্ট

@ পিয়ারডুক এটি ২০১২ এর .. আমরা আর ব্যবহার করি না :)

— ২০

@ a20 আমি গতবার যাচাই করেছি, আমি এখনও এটি ব্যবহার করছি। সুতরাং, আমি অনুমান করি আপনি ভুল বলেছেন

— Poul Kruijt

আমি ভাইকে মজা করছিলাম .. দুঃখিত!

— a20

Answer 5

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

});

আপনি যদি সমস্ত ইনপুট, টেক্সারিয়া করতে চান এবং প্রয়োজনীয় উপাদানগুলি নির্বাচন করতে চান।

Answer 6

এটি চেষ্টা করে দেখুন ..

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