Як встановити необхідний атрибут HTML5 у Javascript?

Question 1

Я намагаюся позначити textполе введення відповідно до вимог Javascript.

<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атрибут на "час виконання" , через Javascript:

<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]

Це може призвести до рішення.

Question 2

requiredце відображено властивість (наприклад id, name, type, і такий), так що :

element.required = true;

... де elementфактичний inputелемент DOM, наприклад:

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

(Тільки для повноти.)

Re:

Тоді значенням атрибута є не порожній рядок, ані канонічне ім'я атрибута:
edName.attributes.required = [object Attr]

Це тому, що requiredв цьому коді є об’єкт атрибута , а не рядок; attributesє a NamedNodeMap, значення якого є Attrоб'єктами . Щоб отримати значення одного з них, ви повинні переглянути його valueвластивість. Але для логічного атрибута значення не є актуальним; атрибут або присутній на карті (true), або відсутній (false).

Отже, якщо required вони не були відображені, ви б встановили його, додавши атрибут:

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

... що еквівалентно element.required = true. Ви можете очистити це, повністю видаливши:

element.removeAttribute("required");

... що еквівалентно element.required = false.

Але ми не повинні цього робити required, оскільки це відображається.

Question 3

Коротка версія

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

Довга версія

Як тільки TJ Crowder зумів вказати на відображені властивості , я дізнався, що наступний синтаксис неправильний :

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

Встановивши для значення атрибута значення "true", ви помилково встановлюєте його для об'єкта 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 всередині.

На додаток до цього відображаються деякі атрибути . Це означає, що ви можете отримати до них приємніший доступ з Javascript:

//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)
{
}

Question 4

Важливим є не атрибут, а властивість , а його значення є логічним значенням.

Ви можете встановити його за допомогою

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

Question 5

І версія jquery:

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

Я знаю, що це поза питанням, але, можливо, комусь це буде корисно :)

Question 6

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

});

Якщо ви хочете зробити всі введені, текстові області та обрати необхідні елементи.

Question 7

спробуйте це ..

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