Así que tengo un formulario, pero todavía no necesito enviar la información al servidor ... Lo que necesito es ejecutar los campos a través de las condiciones de validación incorporadas de HTML5 (como correo electrónico, etc. ), y si es verdadero, simplemente ejecute una función específica ...

Hasta ahora, se me ocurrió esto ...

function checkform()
{
    var /* all the elements in the form here */

    if (inputElement.validity.valid == 'false')
    {
        /* Submit the form, 
        this will cause a validation error, 
        and HTML5 will save the day... */
    } else
    {
        navigateNextStep();
    }
}

Esa es la lógica que se me ocurrió hasta ahora, y es un poco contraproducente porque estoy enviando SABER que hay un valor no válido, por lo tanto, desencadenando los mensajes de validación ...

Mi único problema con la lógica anterior, es que tengo alrededor de 7-8 elementos de entrada, y encuentro la opción de hacer lo siguiente en lugar de 'sucio':

var inputs = document.getElementsByTagName("INPUT");
if (!inputs[0].validity.valid && !inputs[1].validity.valid && ...)

¿Ideas?

6
Abhishek 14 jun. 2011 a las 07:55

3 respuestas

La mejor respuesta

Simplemente puede llamar a formEl.checkValidity() ... Esto devolverá un valor booleano que indica si todo el formulario es válido o no, y de lo contrario arrojará los eventos invalid apropiados.

La especificación

Un breve JSFiddle para jugar

Sin embargo, no estoy seguro de cómo espera enviar el formulario para activar la interfaz de usuario de validación del navegador. Llamar a formEl.submit() parece resultar en un envío, independientemente del estado de validación. Esto se observa en la parte inferior de La página del proyecto H5F, que dice:

Safari 5, Chrome 4-6 y Opera 9.6+ bloquean el envío de formularios hasta que se cumplan todas las restricciones de validación de control de formularios.

Opera 9.6+ al enviar el formulario se enfocará en el primer campo no válido y mostrará un bloque de UI que indica que no es válido.

Safari 5.0.1 y Chrome 7 han eliminado el bloqueo de envío de formularios si un formulario no es válido, probablemente debido a que los formularios heredados ahora no se envían en sitios más antiguos.

16
Domenic 14 jun. 2011 a las 06:37

Ok, esto es incómodo ... Gracias a Domenic y al buen Google, encontré una solución alternativa ...

Ejecuté un bucle for, comprobando si cada uno de los elementos de entrada era válido o no a través del método imputElement.validity.valid, que devolvió un valor booleano ...

Para cada elemento que era válido, incrementé una variable en 1 e incluí una declaración condicional en el bucle para verificar si la variable se había incrementado lo suficiente como para ejecutar la función de navegación ...

Si hubiera un campo no válido, la instrucción if nunca se ejecutaría, y (aquí está la parte divertida) el navegador validaría los campos de todos modos, aparecería diciendo qué campos estaban rotos y necesitaban corrección del usuario ... :-)

El For Loop ...

for (i=0;i<8;i++)
{
    if (inputs[i].validity.valid)
        hg++;
}

if (hg==8)
    skimregform();
1
Abhishek 14 jun. 2011 a las 08:30

Puede activar mediante programación la comprobación de cada campo en su formulario, incluso si establece la función event.preventDefault ().

  document.forms["form_id_name"].reportValidity();
0
Armand 4 ago. 2017 a las 18:21