lunes, febrero 09, 2015

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="[email protected]" 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.


JavaScript: Removiendo hijos

Supongamos que se desea eliminar una lista de nodos hijos en un elemento particular en el dom; regularmente seguiríamos la siguiente forma


// Bajo parent Id los elementos que deseo eliminar tienen un className en común.
var nodes =
    document.getElementsByClassName(className);

var parentNode =
    document.getElementById(parentId);

            if (nodes) {

                for (var i = 0; i < nodes.length; ++i) {

                    var node = nodes[i];

                    if (node) {

                        if (parentNode.contains(node)) {

                            parentNode.removeChild(node);
                        }
                    }
                }
            }



El problema con el código anterior es que no se eliminan todos los elementos, si no alrededor de la mitad y esto sucede porque el valor nodes.length es alterado cada vez que eliminamos un nodo (o al menos es lo que creo, tampoco me detuve mucho tiempo a comprobar mi teoría), el cambio siguiente me funciono bien (simplemente cambie el siglo del for para que decremente en lugar de incrementar)

for (var i = nodes.length - 1; i >= 0; --i)