validacion - ¿Cómo establecer el atributo requerido HTML5 en Javascript?

validar formulario html javascript

Question

Estoy tratando de marcar un cuadro de entrada de text como se requiere en Javascript.

<input id="edName" type="text" id="name">

Si el campo está inicialmente marcado como required :

<form>
    <input id="edName" type="text" id="name" required><br>
    <input type="submit" value="Search">
</form>

cuando el usuario intenta enviar, recibe un error de validación:

Pero ahora quiero establecer el atributo required en "runtime" , a través de Javascript:

<form>
    <input id="edName" type="text" id="name"><br>
    <input type="submit" value="Search">
</form>

con el script correspondiente:

//recommended W3C HTML5 syntax for boolean attributes
document.getElementById("edName").attributes["required"] = "";         

Excepto cuando envío ahora, no hay verificación de validación, no hay bloque.

¿Cuál es la forma correcta de establecer un atributo booleano de validación HTML5 ?

jsFiddle

¿Cuál es el valor del atributo, preguntas?

El atributo de validación HTML5 required se documenta como un Boolean :

4.10.7.3.4 El atributo required

El atributo required es un atributo booleano . Cuando se especifica, el elemento es obligatorio.

Hay muchos apretones de mano sobre cómo definir un atributo boolean . Las notas de especificación HTML5:

La presencia de un atributo booleano en un elemento representa el valor verdadero, y la ausencia del atributo representa el valor falso.

Si el atributo está presente, su valor debe ser la cadena vacía o un valor que es una coincidencia ASCII insensible a mayúsculas y minúsculas para el nombre canónico del atributo, sin espacios en blanco iniciales o finales.

Esto significa que puede especificar un atributo booleano required dos maneras diferentes:

edName.attributes.required = ""; //the empty string
edName.attributes.required = "required"; //the attribute''s canonical name

Pero, ¿cuál es realmente el valor del atributo?

Cuando miras jsFiddle , notarás que si el atributo required está definido en el marcado:

<input id="edName" type="text" id="name" required>

Entonces, el valor del atributo no es la cadena vacía, ni el nombre canónico del atributo:

edName.attributes.required = [object Attr]

Eso podría conducir a una solución.

Answer 1

Version corta

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

Versión larga

Una vez que TJ Crowder logró señalar las propiedades reflejadas , aprendí que la siguiente sintaxis es incorrecta :

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

Debe pasar por element.getAttribute y element.setAttribute :

element.getAttribute("foo");         //correct
element.setAttribute("foo", "test"); //correct

Esto se debe a que el atributo en realidad contiene un objeto 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

Al establecer un valor de atributo en "verdadero", está configurando erróneamente un objeto String , en lugar del objeto HtmlAttribute que requiere:

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, la idea correcta (expresada en un lenguaje tipado) es:

HtmlAttribute attribute = new HtmlAttribute();
attribute.value = "";
element.attributes["required"] = attribute;

Esta es la razón por:

• getAttribute(name)
• setAttribute(name, value)

existe. Ellos hacen el trabajo de asignar el valor al objeto HtmlAttribute dentro.

Además de esto, algunos atributos se reflejan . Esto significa que puedes acceder a ellos de forma más agradable desde 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;

Lo que no quiere hacer es usar erróneamente la colección .attributes :

element.attributes.required = true;     //WRONG!
if (element.attributes.required) {...}  //WRONG!
element.attributes.required = false;    //WRONG!

Casos de prueba

Esto llevó a probar el uso de un atributo required , la comparación de los valores devueltos a través del atributo y la propiedad reflejada

document.getElementById("name").required;
document.getElementById("name").getAttribute("required");

con 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)

Intentar acceder directamente a la colección .attributes es incorrecto. Devuelve el objeto que representa el atributo DOM:

edName.attributes["required"] => [object Attr]
edName.attributes.required    => [object Attr]

Esto explica por qué nunca debes hablar directamente con los .attributes collect. No está manipulando los valores de los atributos, sino los objetos que representan los atributos en sí mismos.

Cómo establecer requerido?

¿Cuál es la forma correcta de establecer required en un atributo? Tiene dos opciones, ya sea la propiedad reflejada, o estableciendo correctamente el atributo:

element.setAttribute("required", "");         //Correct
edName.required = true;                       //Correct

Estrictamente hablando, cualquier otro valor "establecerá" el atributo. Pero la definición de atributos Boolean dicta que solo se debe establecer en la cadena vacía "" para indicar verdadero . Todos los métodos siguientes funcionan para establecer el atributo booleano required .

pero no los uses :

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

Ya aprendimos que intentar establecer el atributo directamente es incorrecto:

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

Cómo borrar requerido?

El truco al intentar eliminar el atributo required es que es fácil activarlo accidentalmente:

edName.removeAttribute("required");     //Correct
edName.required = false;                //Correct

Con las 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!

Al usar la propiedad .required , también puede usar cualquier valor de "falsey" para desactivarlo y valores verdaderos para activarlo. Pero solo adhiérase a verdadero y falso para mayor claridad.

¿Cómo verificar required ?

Verifique la presencia del atributo a través del .hasAttribute("required") :

if (edName.hasAttribute("required")
{
}

También puede verificarlo a través de la propiedad .required reflejada booleana :

if (edName.required)
{
}

Answer 2

Lo que importa no es el atributo sino la propiedad , y su valor es un booleano.

Puedes configurarlo usando

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

Answer 3

Y la versión jquery:

$(''input'').attr(''required'', true)
$(''input'').attr(''required'', false)

Sé que está más allá de la cuestión, pero tal vez alguien lo encuentre útil :)

Answer 4

prueba esto ...

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

Answer 5

required es una propiedad reflejada (como id , name , type y demás), entonces:

element.required = true;

... donde element es el elemento DOM de input real, por ejemplo:

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

(Solo para completar)

Re:

Entonces, el valor del atributo no es la cadena vacía, ni el nombre canónico del atributo:

edName.attributes.required = [object Attr]

Eso es porque se required en ese código un objeto de atributo , no una cadena; attributes es un NamedNodeMap cuyos valores son objetos Attr . Para obtener el valor de uno de ellos, observaría su propiedad de value . Pero para un atributo booleano, el valor no es relevante; el atributo está presente en el mapa (verdadero) o no presente (falso).

Por lo tanto, si no se refleja, se debe establecer agregando el atributo:

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

... que es el equivalente de element.required = true . Lo borrará quitándolo por completo:

element.removeAttribute("required");

... que es el equivalente de element.required = false .

Pero no tenemos que hacer eso con lo required , ya que se refleja.