Ответ 1

Укороченная версия

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 вы также можете использовать любые значения "falsey", чтобы отключить его, и истинные значения, чтобы включить его. Но просто придерживайтесь истины и лжи для ясности.

Как проверить на required?

Проверьте наличие атрибута с помощью .hasAttribute("required"):

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

Вы также можете проверить это через логическое свойство .required:

if (edName.required)
{
}

Ответ 2

required является отраженным свойством (например, id, name, type и т.д.), поэтому:

element.required = true;

... где element является фактическим элементом input DOM, например:

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

(Только для полноты.)

Re:

Тогда значение атрибута не является пустой строкой, а также каноническим именем атрибута:

edName.attributes.required = [object Attr]

Это потому, что required в этом коде является объектом атрибута, а не строкой; attributes - NamedNodeMap, значения которого Attr объектов. Чтобы получить значение одного из них, вы можете посмотреть его свойство value. Но для атрибута boolean значение не имеет значения; атрибут присутствует либо в карте (true), либо отсутствует (false).

Итак, если required не были отображены, вы должны установить его, добавив атрибут:

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

..., что эквивалентно element.required = true. Вы очистите его, полностью удалив его:

element.removeAttribute("required");

..., что эквивалентно element.required = false.

Но нам не нужно делать это с required, так как оно отражено.

Ответ 3

И версия jquery:

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

Я знаю это вне вопроса, но, возможно, кто-то найдет это полезным:)

Ответ 4

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

Вы можете установить его с помощью

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

Ответ 5

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

});

Если вы хотите сделать все, введите текстовые поля и выберите необходимые элементы.

Ответ 6

попробуйте это.

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