2.1.2.- Aplicaciones web con PHP y JavaScript (II).

Partiendo de la página PHP anterior, que ya incluye código para validar el formulario web en el servidor, vas a ver cómo puedes hacer para incorporarle código en JavaScript que realice la misma validación en el cliente. De esta forma, si el navegador del usuario soporta JavaScript, se reducirá el procesamiento del servidor y la transferencia de información entre éste y el cliente.

Crearás todo el código necesario en un archivo externo que llamaremos "validar.js". Como vamos a utilizar la librería jQuery, tendrás que añadir las dos líneas siguientes a la página anterior:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src='validar.js'></script> 

En el enlace siguiente puedes encontrar los enlaces para bajarte el CDN más reciente para jQuery: Jquery.

En el código JavaScript habrá que definir unas funciones de validación similares a las programadas anteriormente en PHP:

function validarNombre() {
    var usu = $("#usu");
    var errUsu = $("#errUsu");
    if (usu.val().length < 4) {
        errUsu.removeClass("d-none").addClass("input-group form-group text-danger");
        return false;
    }
    errUsu.last().addClass("d-none");
    return true;

}
function validarPass() {
    var pass1 = $("#pass1");
    var pass2 = $("#pass2");
    var errPass = $("#errPass");
    if (pass1.val().length < 6 || pass1.val() != pass2.val()) {
        errPass.removeClass("d-none").addClass("input-group form-group text-danger");
        return false;
    }
    errPass.last().addClass("d-none");
    return true;

}
function validarMail() {
    var mail = $("#mail")
    var errMail = $("#errMail");
    if (!mail.val().match("^[a-zA-Z0-9]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$")) {
        errMail.removeClass("d-none").addClass("input-group form-group text-danger");
        return false;
    }
    errMail.last().addClass("d-none");
    return true;
}
function validar() {
    return validarNombre() & validarMail() & validarPass();
}

Las funciones usan los métodos de jQuery addClass() y removeClass() para incorporar, y quitar, respectivamente, los textos de validación a la clase oculto, lo mismo que hacía el código PHP anterior. Para seleccionar los elementos a ocultar, puedes utilizar también jQuery. Por ejemplo, para seleccionar el elemento de la página web con identificador "usu", se pone:

var usu=$("#usu");

Podemos capturar el evento submit del formulario forzando a que se valide con la función de JavaScript. Si la validación no es correcta event.preventDefault() evitará que se haga el submit del mismo.

$("#registro").submit(function(event){
    if(!validar()) event.preventDefault();
});

En el código final del ejemplo se ha quitado la validación PHP (en el servidor) para que se vea más legible