Configuración dinámica del atributo requerido en HTML5 usando Javascript

Para configurar dinámicamente el atributo requerido en HTML5 usando Javascript, siga los pasos a continuación:

Resumen del problema

Intentando establecer el atributo requerido usando la sintaxis recomendada del W3C:

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

no t activa comprobaciones de validación.

Forma correcta de establecer un atributo booleano de validación HTML5

La forma correcta de establecer un atributo booleano de validación HTML5 es utilizar la propiedad element.required.

Por ejemplo:

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

donde edName es el ID del elemento de entrada.

Comprender el valor del atributo

En HTML5, los atributos booleanos se pueden definir de la siguiente manera:

• Dejando el atributo vacío: requerido=""
• Usando el nombre canónico del atributo : requerido="requerido"

Sin embargo, cuando el atributo requerido se define en el marcado, el valor del atributo no es ninguna de estas opciones:

edName.attributes.required = [object Attr]

Esto se debe a que se requiere una propiedad reflejada, similar a id, nombre y tipo.

Propiedades reflejadas

Las propiedades reflejadas son atributos que existen en el objeto del elemento sí mismo. Establecer el valor de una propiedad reflejada actualiza el atributo correspondiente en el HTML.

Por lo tanto, los dos métodos siguientes son equivalentes:

Usar la propiedad setter:

element.required = true;

Usando setAttribute:

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

Para borrar un propiedad reflejada, use removeAttribute:

element.removeAttribute("required");