Definindo dinamicamente o atributo obrigatório do HTML5 usando Javascript

Para definir dinamicamente o atributo obrigatório em HTML5 usando Javascript, siga as etapas abaixo:

Visão geral do problema

Tentativa de definir o atributo obrigatório usando a sintaxe W3C recomendada:

document.getElementById("edName").attributes["required"] = "";

doesn' t aciona verificações de validação.

Maneira correta de definir o atributo booleano de validação HTML5

A maneira correta de definir um atributo booleano de validação HTML5 é usar a propriedade element.required.

Por exemplo:

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

onde edName é o ID do elemento de entrada.

Compreendendo o valor do atributo

Em HTML5, atributos booleanos podem ser definidos por:

• Deixando o atributo vazio: obrigatório=""
• Usando o nome canônico do atributo : require="required"

No entanto, quando o atributo obrigatório é definido na marcação, o valor do atributo não é nenhuma destas opções:

edName.attributes.required = [object Attr]

Isso ocorre porque require é uma propriedade refletida, semelhante a id, nome e tipo.

Propriedades refletidas

Propriedades refletidas são atributos que existem no objeto do elemento em si. Definir o valor de uma propriedade refletida atualiza o atributo correspondente no HTML.

Portanto, os dois métodos a seguir são equivalentes:

Usando a propriedade setter:

element.required = true;

Usando setAttribute:

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

Para limpar um propriedade refletida, use removeAttribute:

element.removeAttribute("required");