Como definir o atributo necessário HTML5 em Javascript?
estou a tentar marcar uma caixa de entrada text
Como necessária em Javascript.
<input id="edName" type="text" id="name">
Se o campo estiver inicialmente marcado como required
:
<form>
<input id="edName" type="text" id="name" required><br>
<input type="submit" value="Search">
</form>
Quando o utilizador tenta submeter-se, é-lhe dado um erro de validação:
Mas agora quero definir o atributo required
em "runtime" , através de Javascript:
<form>
<input id="edName" type="text" id="name"><br>
<input type="submit" value="Search">
</form>
com a escrita correspondente:
//recommended W3C HTML5 syntax for boolean attributes
document.getElementById("edName").attributes["required"] = "";
excepto quando me submeto agora, não há verificação de validação, não bloco.
Qual é o correcto modo de definir um atributo booleano de validaçãoHTML5?
Qual é o valor do atributo, pergunta?a validação HTML5 required
o atributo é documentado como a Boolean
:
4.10.7.3.4 O
required
atributoa
required
o atributo é um atributo booleano . Quando especificado, o elemento é necessario.
há muito esforço para definir um atributo boolean
. The HTML5 spec notes:
a presença de um atributo booleano num elemento representa o valor verdadeiro, e a ausência do atributo representa o valor falso.
Se o atributo estiver presente, o seu valor deve ser o texto vazio ou um valor que seja uma correspondência ASCII sem distinção de maiúsculas ou minúsculas para o nome canónico do atributo, sem qualquer avanço ou atraso branco.
isto significa que pode especificar um required
boolean atribui duas maneiras diferentes:
edName.attributes.required = ""; //the empty string
edName.attributes.required = "required"; //the attribute's canonical name
mas qual é o valor do atributo realmente ?
Quando você olhar para meu jsFiddle deste problema , Você vai notar que se o atributo required
está definido na marcação:
<input id="edName" type="text" id="name" required>
Então o valor do atributo é Não o texto vazio, nem o nome canónico do atributo:
edName.attributes.required = [object Attr]
Isso pode levar a uma solução.
5 answers
required
é uma propriedade reflectida (Como id
, name
, type
, e tal), assim:
element.required = true;
...em que element
é o elemento DOM real input
, por exemplo:
document.getElementById("edName").required = true;
(Apenas para completar.)
Re:
Então o valor do atributo não é a cadeia vazia, nem o nome canónico do atributo:
edName.attributes.required = [object Attr]
Isso é porque required
nesse código é um objeto de atributo , Não uma string; attributes
é um NamedNodeMap
cujos valores são Attr
objectos . Para obter o valor de um deles, você olharia para a sua propriedade. But for a boolean attribute, the value is not relevant; the attribute is either present in the map (true) or not present (false).
Então se required
não estava reflectido, você definia-o adicionando o atributo:
element.setAttribute("required", "");
...que é o equivalente a element.required = true
. Limpá-la-ias removendo-a completamente.
element.removeAttribute("required");
...que é o equivalente a element.required = false
.
required
, já que é reflectido.
Versão curta
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
Versão Longa
Uma Vez Que T. J. Crowder conseguiu apontar propriedades refletidas , eu aprendi que seguir a sintaxe é errado:
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
Tu deve passar por element.getAttribute
e element.setAttribute
:
element.getAttribute("foo"); //correct
element.setAttribute("foo", "test"); //correct
Isto é porque o atributo contém de facto um objecto especial 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
Ao definir um valor de atributo para "true" , você está erroneamente configurando-o para um String object, rather than the HtmlAttribute object it requires:
element.attributes["foo"] = "true"; //error because "true" is not a HtmlAttribute object
element.setAttribute("foo", "true"); //error because "true" is not an HtmlAttribute object
Conceptualmente a ideia correcta (expressa numa língua tipada) é:
HtmlAttribute attribute = new HtmlAttribute();
attribute.value = "";
element.attributes["required"] = attribute;
É por isto que:
getAttribute(name)
setAttribute(name, value)
Além disso, alguns atributos sãoreflectidos . Isso significa que você pode acessá-los mais bem a partir de 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;
O que você não quer é usar erradamente a .attributes
colecção:
element.attributes.required = true; //WRONG!
if (element.attributes.required) {...} //WRONG!
element.attributes.required = false; //WRONG!
Casos De Teste
Isto levou a testar a utilização de um atributo required
, comparando os valores devolvidos através do atributo, e a propriedade reflectida
document.getElementById("name").required;
document.getElementById("name").getAttribute("required");
Com resultados:
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)
Tentar aceder directamente à colecção está errado. Devolve o objecto que representa o atributo DOM:
edName.attributes["required"] => [object Attr]
edName.attributes.required => [object Attr]
Isto ... explica porque é que nunca deves falar com a colecção directamente. Você não está manipulando os valores dos atributos, mas os objetos que representam os próprios atributos.
Como definir necessário?
Qual é a maneira correcta de definir required
num atributo? Você tem duas opções, seja a propriedade refletida, ou através da definição correta do atributo:
element.setAttribute("required", ""); //Correct
edName.required = true; //Correct
Estritamente falando, qualquer outro valor irá "definir" o atributo. Mas o a definição dos atributos Boolean
determina que só deve ser configurada para a cadeia vazia ""
para indicar true . Todos os métodos a seguir indicados funcionam como conjunto required
atributo Boolean ,
Mas não utilize eles:
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
Já aprendemos que tentar definir o atributo diretamente está errado:
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
Como limpar necessário?
O truque ao tentar remover o atributo required
é que é fácil ligá-lo acidentalmente.
edName.removeAttribute("required"); //Correct
edName.required = false; //Correct
Com as formas inválidas:
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!
Ao usar a propriedade .required
reflectida, também pode usar quaisquer valores de falsey para a desligar, e valores truthy para a ligar. Mas mantém-te fiel ao verdadeiro e ao falso por clareza.
Como verificar para required
?
Verifique a presença do atributo através do método .hasAttribute("required")
:
if (edName.hasAttribute("required")
{
}
Também podes verificar através dobooleano propriedade reflectida .required
:
if (edName.required)
{
}
E a versão jquery:
$('input').attr('required', true)
$('input').attr('required', false)
Sei que está fora de questão, mas talvez alguém ache isto útil.
O que importa não é o atributo, mas a Propriedade, e o seu valor é booleano.
Pode configurá-lo usando
document.getElementById("edName").required = true;
document.getElementById("edName").required = true;