我正在尝试在Javascript中将一个text
输入框标记为required。
<input id="edName" type="text" id="name">
如果字段最初标记为required
<form>
<input id="edName" type="text" id="name" required><br>
<input type="submit" value="Search">
</form>
当用户尝试提交时,会出现验证错误:
但是现在我想通过Javascript在“运行时”设置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验证布尔值属性的正确方法是什么
你会问这个属性的值是什么?
作为Boolean
的HTML5验证required
attribute is documented
4.10.7.3.4 attribute
required
属性是一个boolean attribute。如果指定该元素,则该元素是必需的。
关于如何定义boolean
属性,有很多繁琐的工作。HTML5规范说明:
如果元素上存在布尔属性,则表示真值,如果不存在该属性,则表示假值。
如果该属性存在,则其值必须是空字符串,或者是与属性规范名称不区分大小写的ASCII匹配的值,并且没有前导空格或尾随空格。
这意味着您可以通过两种不同的方式指定required
布尔属性:
edName.attributes.required = ""; //the empty string
edName.attributes.required = "required"; //the attribute's canonical name
但是这个属性的真正值是什么呢?
查看my jsFiddle of this problem时,您会注意到如果在标记中定义了required
属性:
<input id="edName" type="text" id="name" required>
则属性值为,而不是空字符串,也不是属性的规范名称:
edName.attributes.required = [object Attr]
这可能会导致一个解决方案。
发布于 2013-09-13 04:54:41
简短版本
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
长版本
当T.J.Crowder设法指出reflected properties时,我了解到以下语法是错误的
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
You go go go element.getAttribute
element.setAttribute
(你必须通过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;
‘t想要做的是错误地使用.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
collect对话。您操作的不是属性的值,而是表示属性本身的对象。
如何设置required?
在属性上设置required
的正确方法是什么?您有两个选择,要么是反射属性,要么是通过正确设置属性:
element.setAttribute("required", ""); //Correct
edName.required = true; //Correct
严格地说,任何其他值都将“设置”该属性。但是Boolean
属性的定义规定它只能设置为空字符串""
来表示true。以下方法都适用于设置required
Boolean属性,
但是不使用它们:
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
How to clear required?
尝试删除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值”将其关闭,而使用Trusy值将其打开。但为了清晰起见,只需坚持true和false即可。
如何检查required
通过.hasAttribute("required")
方法检查是否存在该属性:
if (edName.hasAttribute("required"))
{
}
您还可以通过布尔型反射.required
属性来检查它:
if (edName.required)
{
}
发布于 2013-09-13 01:10:17
required
是一个reflected property (类似于id
、name
、type
等),所以:
element.required = true;
...where element
是实际的input
DOM元素,例如:
document.getElementById("edName").required = true;
(只是为了完整性。)
回复:
则属性值既不是空字符串,也不是属性的规范名称:
edName.attributes.required =对象属性
这是因为代码中required
是一个属性对象,而不是字符串;attributes
是一个值为Attr
objects的NamedNodeMap
。要获得其中之一的值,可以查看它的value
属性。但是对于布尔型属性,该值是不相关的;该属性要么存在于map中(true),要么不存在(false)。
因此,如果没有反映required
,可以通过添加以下属性来设置它:
element.setAttribute("required", "");
...which相当于element.required = true
。您可以通过完全删除它来清除它:
element.removeAttribute("required");
...which相当于element.required = false
。
但是我们不需要使用required
,因为它已经被反映出来了。
发布于 2013-09-13 01:10:07
重要的不是属性,而是属性,它的值是一个布尔值。
您可以使用以下命令设置它
document.getElementById("edName").required = true;
https://stackoverflow.com/questions/18770369
复制相似问题