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

Pasos para remover Postgresql 8.3 en MAC OS

Tomado de: http://forums.enterprisedb.com/posts/list/1437.page In Mac OSX: (Assuming Default Locations) Via uninstaller: 1) In the installation directory, there will be a uninstall-postgresql.app file will be there, executing (double clicking) that will uninstall the postgresql installation. Manual Uninstallation: 1) Stop the server sudo /sbin/SystemStarter stop postgresql-8.3 2) Remove menu shortcuts: sudo rm -rf /Applications/PostgreSQL 8.3 3) Remove the ini file sudo rm -rf /etc/postgres-reg.ini 4) Removing Startup Items sudo rm -rf /Library/StartupItems/postgresql-8.3 5) Remove the data and installed files sudo rm -rf /Library/PostgreSQL/8.3 6) Delete the user postgres sudo dscl . delete /users/postgres
Si quiere eliminar las lineas extras, que deja el contenido no-rendered de los JSP, es decir, las lineas y espacios por utilizar tag lib, utilicen esta sentencia en sus JSP's <%@page trimDirectiveWhitespaces="true"%&gt: [+] info: http://java.sun.com/developer/technicalArticles/J2EE/jsp_21/

Mi primera aportación al Mundo Open Source - Siena

A pesar que he intentado crear mis propias iniciativas de sistemas open sources, pienso que los objetivos siempre han sido muy complejos o de gran tamaño. Dejando de lado esas salidas en falso y que revelaban la necesidad y ganas que se ha venido manifestando para integrarme en algún proyecto open source; tengo el gusto de proclamar mi primer aporte oficial al mundo del Open Source. El proyecto al cual he dado mi pequeño granito de arena es llamado Siena , el mismo es un liviano y muy sencillo framework para persistir objetos. En su primera fase tiene un soporte para MySQL, sin embargo me parece que los planes futuros es integrarlo con otras bases de datos y/o mecanismos de persistencia diferentes, como las base de datos en la nube con aplicaciones distribuidas al estilo de Amazon o Google Engine, entre otros mecanismos de persistencia basados en servicios RestFul, etc. Mi primera aportación se basa en la integración de Maven al proyecto; anteriormente se distribuía como un proyect