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

Publicar un comentario

Entradas más populares de este blog

Transformando fechas a diferentes zonas horarias (TimeZone)

Ya es sabido por todo programador Java, que uno de los puntos mas bajos, recae en el uso de las fechas, las mismas se encuentran super mal diseñadas y algunos objetos como el caso de Date, practicamente no son usables, pues toda su API esta deprecada (cosa que siento debería de dejar de ponerla deprecada, pues van por la versión 6 y aun la conservan). Recientemente me encontré con el siguiente problema; resulta que al poner un sistema en otro servidor, el cual aparentemente tiene una diferencia horaria configurada, obtenemos como seria de esperar resultados no esperados, cuando realizamos consultas con fechas a la base de datos. La primera solución que se nos ha ocurrido es implementar un convertidor de fechas a diferentes zonas horarias, a continuación coloco el método necesario para realizar la operación: public static Date convertToTimeZoneDate(Date date, TimeZone timeZone) { Date newTimeZoneDate = null; Calendar foreignCalendar = null; // Create a Calendar object with the local ti...
4 comentarios
Leer más

Analizador de expresiones algebraicas recursivo decendente

Como les mencione en un post previo, estoy leyendo el libro el arte de programar en Java, el primer ejercicio consiste en un analizador de expresiones algebraicas recursivo descendente, el mismo consiste en la posibilidad de tomar una cadena que contenga una expresión matemática, la misma puede contener valores en punto flotante, sumar, restar, dividir, multiplicar, sacar exponente (potencia), uso de paréntesis para priorizar una operación, etc. A continuación clase a clase, con una pequeña explicación Lo primero que definiremos es una suite de excepciones para reportar errores, no tiene mucha ciencia, hay una para la division entre cero, cuando no existe una expresión valida, error de sintaxis o cuando los paréntesis no se encuentran balanceados, veamos package cap2; /** * Exception para reportar que hay al intentar dividir entre cero * * User: jsanca * Date: 4/16/13 * Time: 1:30 AM * @author jsanca */ public class DividedByZeroException extends RuntimeException { ...
4 comentarios
Leer más

Comparación de cadenas en Java

El siguiente código nos muestra diferentes formas y métodos para realizar comparaciones de cadenas. La primera comparación con el operador (==), se realiza simplemente a nivel de referencia de memoria. El método (equals) permite realizar una comparación carácter a carácter de dos strings. (equalsIgnoreCase) funciona igual que (equals) descartando las diferencias entre mayúsculas y minúsculas. (CompareTo) permite comparar dos cadenas, con la diferencias que si la clase es igual retorna 0, si la primera cadena es mayor retorna la diferencia (un numero positivo), si la cadena es menor retorna también la diferencia (un numero negativo). Por ultimo se utilizan métodos para realizar comparaciones de pre y pos cadenas, obtener un índice, etc. public void comparisonEqual () { String s1 = "Hello Word"; String s2 = "Hello Word"; String s3 = s1; // Equal examples... System.out.println((s1 == s2)?s1 + " = " + s3: s1 + " != " + s3); System.out...
3 comentarios
Leer más