Ir al contenido principal

Validaciones con HTML5 sin necesidad de form.submit

Como parte de HTML5 existe la posibilidad de agregar información a los inputs de un form, para realizar validaciones; podemos indicar si queremos que sea requerido, con el tipo de datos; number, email, etc restringimos los valores que pueden ser agregados, podemos usar alguna mascara para validaciones, colocar mensajes de error custom, etc (en la red existen muchos ejemplos acerca de como customizar formularios).

Ahora bien pongamos en contexto, tengo un formulario como este:

<form name="managerForm"  id="managerForm">
             <p>
                 Name:
                <input id="managerNameText" required="required" placeholder="Write here the new manager name" size="40"/>
             </p>

            <p>
                Email:
                <input id="emailText" required="required" placeholder="myemail@myserver.com" type="email" />
            </p>

             <br/>
             <a href="#" id="addManagerLink">Add a new Manager to the List</a>
         </form>


Si presta atención al markup, podrá ver que se cuenta con dos inputs; un text normal y un email, el text es requerido al igual que el email, adicionalmente el email precisa que el texto introducido sea acorde a una dirección de correo.

Si hiciéramos submit al formulario con algún campo vacío veríamos como el browser se encarga de hacer las validaciones y mostrar los popups con los mensajes de errores.

Ahora bien, el tema es; que sucede si el requerimiento es que el formulario no se envié pero que los errores continúen funcionando de la misma forma. Para ello debemos usar las siguientes funciones en javascript:


 var managerForm =
                    document.getElementById("managerForm");

            if (managerForm.checkValidity()) {

                  // hacer algo
            } else {

                 managerForm.reportValidity();
            }


checkValidity retorna true si no existe ningún error en el formulario, de lo contrario retorna false.

reportValidity muestra los mensajes de error en los popups sobre los inputs correspondientes en caso que existan, similar a cuando hacemos submit.


Comentarios

Entradas más populares de este blog

Impensando acerca de las referencias en Java

Fue hace ya algún tiempo que pase un rato discutiendo con algunos compañeros acerca de si existe o no el paso por referencia; el discurso fue mucho hacia que en Java el comportamiento, en el supuestamente pasamos por referencia un objeto y por valor los objetos primitivos creo mucha polémica. Para ubicarnos en contexto veamos el siguiente ejemplo. public static void main(String[] args) { int value = 10; changeValue(value); System.out.println("value = " + value); User user = new User(); Name name = new Name(); user.setName(name); name.setName("jsanca"); name.setLastName("XXX"); user.setPassword("123queso"); System.out.println("user: " + user.getName().getName() + ", " + user.getName().getLastName() + ", " + user.getPassword()); changeValue1(user); System.out.println("user: " + user.getName().getName() + ", " + user.getName().getLastName() + ", " + user.ge...

Al fin MTV reconoce el potencial de la Internet

Después de mucha lucha y denuncias públicas y demás pleitos para llamar la atención, la cadena mundial de música por televisión mas grande el mundo MTV , abren toda su biblioteca (bueno casi toda, el material en ingles por el momento), al publico. Aseguran tener conciertos, espectáculos acústicos , más todos sus vídeos y a diferencia de YouTube (que es mantenida por una comunidad en buena parte), esta es soportada por MTV , lo que le proporciona idéntica calidad a cada uno de sus temas ( vídeos ), el sitio en donde han publicado el contenido le llaman MTV Music , y yo debo reconocer que estoy como chiquito con juguete nuevo, jejeje . El sitio ofrece una gran cantidad de música , como señale anteriormente y además realiza sugerencias acerca de música o vídeos relacionados, en las búsquedas , te de la oportunidad de ir a un perfil del artista o directamente a los vídeos . Buena noticia y supongo que a MTV le paso como dicta el viejo adajio , " si no puedes vencerlos, unet...

Ideas para un eco-hogar

Un Eco Hogar, Ultimamente he estado pensando al respecto (en la implementación de una casa ecológica), leyendo un poco me entero que existen diferentes alternativas para el ahorro de consumo electrico del hogar; paneles solares, mini hidro turbinas, energía eólica, etc. Algunas alternativas interesantes representan los termos calentados por paneles solares, para no gastar energía en la ducha caliente, etc. Todas estas alternativas están muy bien, aunque la inversión por el momento es algo grande para un hogar promedio, con el consumo masivo, podría convertirse en una opción de facto. Estas opciones representa un ahorro en el consumo eléctrico, pero que hay con el consumo del H2O; sin necesidad de ser muy observador, nos damos cuenta que uno de los mayores puntos donde se desperdicia agua son: el baño y la ducha. En cuanto a la ducha no se me ocurre mas que algunos habitos en vez de soluciones tecnicas, como mojarse, cerrar el tuvo, enjabonarse, etc. Cerrar el tuvo cuando no lo estamos ...