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:

enter image description here

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?

JsFiddle

Qual é o valor do atributo, pergunta?

a validação HTML5 required o atributo é documentado como a Boolean:

4.10.7.3.4 O required atributo

a 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.

Author: Vini.g.fer, 2013-09-12
Source

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.

Mas não temos de fazer isso com o required, já que é reflectido.
 78
Author: T.J. Crowder, 2016-05-03 07:59:55

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)
Existe. Eles fazem o trabalho de atribuir o valor ao objeto HtmlAttribute dentro.

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)
{
}
 70
Author: Ian Boyd, 2017-01-19 20:39:04

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.
 9
Author: vladCovaliov, 2014-02-21 12:31:34

O que importa não é o atributo, mas a Propriedade, e o seu valor é booleano.

Pode configurá-lo usando 

 document.getElementById("edName").required = true;
 6
Author: Denys Séguret, 2013-09-12 17:10:06
Experimenta isto.. 
document.getElementById("edName").required = true;
 0
Author: Vijay, 2013-12-03 05:28:35