如何在 Javascript 中设置 HTML5 必需属性?

IT技术 javascript html validation
2021-01-20 12:19:30

我正在尝试根据Javascript 的要求标记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>

当用户尝试提交时,他们会收到验证错误:

在此处输入图片说明

但现在我想通过 Javascriptrequired"runtime"设置属性

<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 验证布尔属性正确方法是什么

js小提琴

你问这个属性的值是什么?

HTML5 验证required属性记录Boolean

4.10.7.3.4required属性

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]

这可能会导致解决方案。

6个回答

required反射属性(如idnametype等),因此:

element.required = true;

...element实际的inputDOM 元素在哪里,例如:

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

(只是为了完整性。)

回覆:

那么属性的值不是空字符串,也不是属性的规范名称:

edName.attributes.required = [object Attr]

那是因为required在该代码中是一个属性 object,而不是一个字符串;attributes是一个,NamedNodeMap其值为Attrobjects要获得其中之一的值,您需要查看其value属性。但是对于布尔属性,该值是不相关的;该属性在地图中存在 (true) 或不存在 (false)。

因此,如果required 没有反映,您可以通过添加属性来设置它:

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

...相当于element.required = true. 您可以通过完全删除它来清除它:

element.removeAttribute("required");

...相当于element.required = false.

但是我们不必对 这样做required,因为它已被反射。

是的,因为令人困惑的是 prod 在 DOM 中不起作用
2021-03-16 12:19:30
你能在这里添加一些关于 .prop 的东西吗?
2021-03-20 12:19:30
@mplungjan - 我不确定你的意思......?jQuery?
2021-04-09 12:19:30

简洁版本

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.getAttributeelement.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属性的定义规定它应该只设置为空字符串""以指示true下面的方法都工作到设定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)
{
}
变量element之间有什么区别edName
2021-03-16 12:19:30
“你必须经历element.getAttributeelement.setAttribute:”为了清楚起见,attributes NamedNodeMap如果你知道属性已经存在,你可以使用来更改属性的值,你只是不能使用它来添加不存在的属性(或删除一个是)。所以这种方法对布尔属性没有用,required因为对它们来说重要的是它们是否存在,而不是它们的值是什么。但是,是的,反射属性通常更容易。:-)
2021-03-21 12:19:30
一个是我忘记将特定元素名称edName(即名称输入框)转换为通用element.
2021-03-22 12:19:30

重要的不是属性而是property,它的值是一个布尔值。

您可以使用它进行设置

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

和 jquery 版本:

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

我知道这超出了问题的范围,但也许有人会发现这有帮助:)

我在开玩笑我的兄弟..对不起!
2021-03-13 12:19:30
@a20 上次我检查过,我还在使用它。所以,我猜你错了
2021-03-25 12:19:30
实际上,使用prop()而不是attr():)
2021-04-01 12:19:30
@PierreDuc 这是 2019 年 .. 我们不再使用 :)
2021-04-04 12:19:30
let formelems = document.querySelectorAll('input,textarea,select');
formelems.forEach((formelem) => {
  formelem.required = true;

});

如果您希望所有 input、textarea 和 select 元素都需要。