Validar campos de un formulario en HTML5, JS, jQuery o PHP

Alfredo
Sígueme!
Validar campos en HTML5,JavaScript, jQuery o PHP

Datos previos

¿Para qué sirve validar campos de un formulario?

El principal objetivo es garantizar que los datos enviados a través de un formulario sean completos, precisos, seguros y consistentes. Esto se logra a través de controles de validación de datos y reglas que se comprueba al validar el formulario.

Ejemplo práctico

Principales restricciones

  • En el campo “Edad” sólo se puede añadir números.
  • Sólo permitirá validar el campo “Edad” si es mayor de 18 años.
  • En el campo de “Código Postal” sólo permitirá 5 números. Ejemplo: 28030
  • En el campo “DNI” se deberá de añadir con el siguiente patrón 12345678G
  • En caso que en el “DNI” añaden un guión antes de la letra, lo suprimirá y mantiene el patrón aceptado.
  • En el campo “DNI” calculará la letra correcta.
  • En el campo “Email” validará si el patrón es info@lacodigoteca.com
  • Habrá un campo de verificación de envío del formulario.
  • En todos los campos se verifica si tienen datos añadidos.

Formulario de origen

Vamos a utilizar el mismo formulario para mostrarte cómo validar campos de un formulario en HTML5, JavaScript, jQuery y PHP.

<form name="miFormulario" action="https://lacodigoteca.com" >
    <label for="nombre">Nombre</label><br> <input type="text" name="nombre"><br>
    <label for="edad">Edad</label><br> <input type="number" name="edad"><br>
    <label for="cp">Código postal</label><br> <input type="text" name="cp"><br>
    <label for="dni">DNI</label><br> <input type="text" name="dni"><br>
    <label for="email">Email</label><br> <input type="text" name="email"><br>
    <label for="so">Sistema Operativo</label><br>
        <select name="so">
            <option value="">Seleccione SO</option>
            <option value="Windows">Windows</option>
            <option value="MacOS">MacOS</option>
            <option value="Linux">Linux</option>
        </select><br> 
    <label for="horas">Horas programación</label><br>
        <input type="radio" name="horas" value="<1"><1h</input>
        <input type="radio" name="horas" value="1-4">1-4h</input>
        <input type="radio" name="horas" value="5-8">5-8h</input>
        <input type="radio" name="horas" value="+8">+8h</input>
        <br> 
    <input type="checkbox" name="condiciones"><label for="condiciones">Acepto enviar este formulario</label><br> 
    <input type="submit" value="Enviar" name="enviar">
</form>

Validar campos en HTML5

  • Para marcar un campo como obligatorio en HTML5, vamos a utilizar el atributo required, lo vamos a añadir dentro de la etiqueta del campo input.
  • Debemos especificar qué tipo de campos en HTML5 vamos a implementar. El campo de edad va a estar en formato numérico, para validar que sólo mete un número , el correo en formato email y el resto de campos vamos a poner el campo en tipo texto.
  • Para campos numéricos podemos establecer un rango mínimo con el atributo min . Aquí os dejo todos los atributos para tipo number.
  • Para añadir un patrón específico, por ejemplo un DNI, deberemos de utilizar el atributo pattern que especifico por esta expresión regular 8 dígitos y una letra ((\d{8})([-]?)([A-Z]{1})). Para validar si la letra es correcta, deberemos de aplicar validaciones en JavaScript, que os lo muestro más abajo de este POST.
<!-- VALIDAR CAMPOS DE UN FORMULARIO CON HTML5 -->
<form name="miFormulario" action="https://lacodigoteca.com" >
    <label for="nombre">Nombre</label><br> <input type="text" name="nombre" required><br>
    <label for="edad">Edad</label><br> <input type="number" name="edad" min="18" required><br>
    <label for="cp">Código postal</label><br> <input type="text" name="cp" required pattern="(^([0-9]{5,5})|^)$" title="Ejemplo: 28000"><br>
    <label for="dni">DNI</label><br> <input type="text" name="dni" required minlength="9" maxlength="10" pattern="((\d{8})([-]?)([A-Z]{1}))" title="Ejemplo: 123456789A"><br>
    <label for="email">Email</label><br> <input type="email" name="email" required><br>
    <label for="so">Sistema Operativo</label><br>
        <select name="so" required>
            <option value="">Seleccione SO</option>
            <option value="Windows">Windows</option>
            <option value="MacOS">MacOS</option>
            <option value="Linux">Linux</option>
        </select><br> 
    <label for="horas">Horas programación</label><br>
        <input type="radio" name="horas" value="<1" required><1h</input>
        <input type="radio" name="horas" value="1-4"required>1-4h</input>
        <input type="radio" name="horas" value="5-8"required>5-8h</input>
        <input type="radio" name="horas" value="+8"required>+8h</input>
        <br> 
    <input type="checkbox" name="condiciones" required><label for="condiciones">Acepto enviar este formulario</label><br> 
    <input type="submit" value="Enviar" name="enviar">
</form>

Validar campos en JavaScript

JavaScript

Funciones utilizadas

  • isNaN: Como dice la función, significa Is Not a Number. Comprueba si el valor que se introduce no es un número válido.
  • parseInt: Convierte ó parsea un tipo de dato que tenemos a un dato numérico.
  • test: Comprueba si coinciden dos datos. Si es correcto, será true, en caso contrato, false.
  • indexOf: Busca un valor personalizado en un dato.
  • replace: Sustituir palabra/carácter de un texto por otra palabra/caracter.
  • substring: Recoge un fragmento de un texto, se pueden aplicar 2 posiciones inicio/fin.
  • toUpperCase: Convierte un texto en mayúsculas.

Añadimos lo siguiente atributo en la etiqueta form onsubmit="return validarUsuario(this);" para poder validar el formulario con la siguiente función:

function validarUsuario(formulario) {
    // Validación de la edad: Comprueba si el dato ha sido introducido, si es un número y si es mayor de edad.
    if(formulario.edad.value.length>0){
        if(isNaN(parseInt(formulario.edad.value))) {
            alert('Escriba correctamente su edad.');
            return false; 
        }else{
            if((parseInt(formulario.edad.value))<18){
                alert('El registro es para mayores de 18 años.');
                return false;                 
            }
        }
    }else{
        alert('Falta por rellenar el campo "Edad"');
        return false;            
    }            
    
    // Validación del Código Postal (en España son 5 caracteres numéricos): Comprueba si el dato ha sido introducido y si cumple con el patrón indicado.
    var patronCP=/(^([0-9]{5,5})|^)$/;
    if(formulario.cp.value.length>0){
        if (!(patronCP.test(formulario.cp.value))) {
            alert('Contenido del código postal no es un código postal válido');
            return false; 
        }            
    }else{
        alert('Falta por rellenar el campo "Código Postal"');
        return false;                
    }

    // Validación de DNI: Comprueba si el DNI es correcto.
    if(formulario.dni.value.length>0){
        
        //Recogemos el valor del DNI en una variable.
        var dni = formulario.dni.value;
            
        // En caso que ponga el DNI con guión, se suprime.
        if((dni.length==10)&&(dni.indexOf('-') != -1)){            
            dni = dni.replace('-', '');
        }
        
        // En caso que ponga el guión pero le faltan números de identificación
        if(((formulario.dni.value.length<10)&&(formulario.dni.value.length>10))&&(formulario.dni.value.indexOf('-') != -1)){            
          alert("Debe de escribir un DNI correcto");
          return false;    
        }                

        //Se separan los números de la letra
        var letraDNI = dni.substring(8, 9).toUpperCase();
        var numDNI = parseInt(dni.substring(0, 8));
        
        //Se calcula la letra correspondiente al número
        var letras = ['T','R','W','A','G','M','Y','F','P','D','X','B','N','J','Z','S','Q','V','H','L','C','K','E','T'];
        var letraCorrecta = letras[numDNI % 23];

        if(letraDNI!= letraCorrecta){
          alert("Debe de escribir un DNI correcto");
          return false;    
        }
    }else{
          alert('Falta por rellenar el campo "DNI"');
          return false;                
    }
    
    // Validación del correo electrónico: Comprueba si el dato ha sido introducido y si es un correo electrónico */
    if(formulario.email.value.length>0){
        var patronEmail=/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/;       
        if (!(patronEmail.test(formulario.email.value))) {
            alert('Contenido del email no es un correo electrónico válido.');
            return false; 
        }            
    }else{
        alert('Falta por rellenar el campo "Email"');
        return false;                
    }
    // Validación del Sistema Operativo: Comprueba si el dato ha sido introducido */
    if(formulario.so.value.length<1){
        alert('Seleccione un Sistema Operativo.');
        return false;
    }    
    // Validación de horas de programación: Comprueba si el dato ha sido introducido */
    if(formulario.horas.value.length<1){
        alert('Seleccione cuántas horas ha programado.');
        return false;
    }                
    // Validación del correo electrónico: Comprueba si acepta enviar el formulario */
    if(!formulario.condiciones.checked){
        alert('Debe de aceptar el envío de este formulario.');
        return false;                
    }                
}

Validar campos en jQuery

A diferencia de JavaScript, vamos a proceder a sustituir cómo obtenemos el valor del campo de Javascript a jQuery. Por ejemplo:

formulario.edad.value ➡️ $("input[name*='edad']").val() y algunos cambios como la confirmación del formulario, utilziaremos :checked

function validarUsuario(formulario) {
    // Validación de la edad: Comprueba si el dato ha sido introducido, si es un número y si es mayor de edad.
    if($("input[name*='edad']").length>0){
        if(isNaN(parseInt($("input[name*='edad']").val()))) {
            alert('Escriba correctamente su edad.');
            return false; 
        }else{
            if((parseInt($("input[name*='edad']").val()))<18){
                alert('El registro es para mayores de 18 años.');
                return false;                 
            }
        }
    }else{
        alert('Falta por rellenar el campo "Edad"');
        return false;            
    }            
    
    // Validación del Código Postal (en España son 5 caracteres numéricos): Comprueba si el dato ha sido introducido y si cumple con el patrón indicado.
    var patronCP=/(^([0-9]{5,5})|^)$/;
    if($("input[name*='cp']").val().length>0){
        if (!(patronCP.test(formulario.cp.value))) {
            alert('Contenido del código postal no es un código postal válido');
            return false; 
        }            
    }else{
        alert('Falta por rellenar el campo "Código Postal"');
        return false;                
    }

    // Validación de DNI: Comprueba si el DNI es correcto.
    if($("input[name*='dni']").val().length>0){
        
        //Recogemos el valor del DNI en una variable.
        var dni = $("input[name*='dni']").val();
            
        // En caso que ponga el DNI con guión, se suprime.
        if((dni.length==10)&&(dni.indexOf('-') != -1)){            
            dni = dni.replace('-', '');
        }
        
        // En caso que ponga el guión pero le faltan números de identificación
        if(((dni.length<10)||(dni.length>10))&&(dni.indexOf('-') != -1)){            
          alert("Debe de escribir un DNI correcto");
          return false;    
        }    

        //Se separan los números de la letra
        var letraDNI = dni.substring(8, 9).toUpperCase();
        var numDNI = parseInt(dni.substring(0, 8));
        
        //Se calcula la letra correspondiente al número
        var letras = ['T','R','W','A','G','M','Y','F','P','D','X','B','N','J','Z','S','Q','V','H','L','C','K','E','T'];
        var letraCorrecta = letras[numDNI % 23];

        if(letraDNI!= letraCorrecta){
          alert("Debe de escribir un DNI correcto");
          return false;    
        }
    }else{
          alert('Falta por rellenar el campo "DNI"');
          return false;                
    }
    
    // Validación del correo electrónico: Comprueba si el dato ha sido introducido y si es un correo electrónico 
    if($("input[name*='email']").val().length>0){
        var patronEmail=/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/;       
        if (!(patronEmail.test($("input[name*='email']").val()))) {
            alert('Contenido del email no es un correo electrónico válido.');
            return false; 
        }            
    }else{
        alert('Falta por rellenar el campo "Email"');
        return false;                
    }
    // Validación del Sistema Operativo: Comprueba si el dato ha sido introducido 
    if($("select[name*='so']").val().length<1){
        alert('Seleccione un Sistema Operativo.');
        return false;
    }        
    // Validación de horas de programación: Comprueba si el dato ha sido introducido 
    if($("input[name='horas']:checked").length < 1) {
        alert('Seleccione cuántas horas ha programado.');
        return false;
    }        
    // Validación del correo electrónico: Comprueba si acepta enviar el formulario 
    if(!$("input[name*='condiciones']").is(":checked")){
        alert('Debe de aceptar el envío de este formulario.');
        return false;                
    }    
}

Validar campos en PHP

//Declaramos una variable para almacenar errores y mostrarlos después
$errores ="";

//Comprobamos que los campos no están vacíos
if(!isset($_POST['nombre'])){
    $errores=$errores. 'Falta por rellenar el campo "Nombre"<br>';
}    
// Validación de la edad: Comprueba si el dato ha sido introducido, si es un número y si es mayor de edad.
if(!isset($_POST['edad'])){
    $errores=$errores. 'Falta por rellenar el campo "Edad"<br>';
}else{
    if(!is_numeric($_POST['edad'])){
        $errores=$errores. "Escriba correctamente su edad.<br>";
    }
    if($_POST['edad']<18){
        $errores=$errores. "El registro es para mayores de 18 años.<br>";
    }
}    

// Validación del Código Postal (en España son 5 caracteres numéricos): Comprueba si el dato ha sido introducido y si cumple con el patrón indicado.    
if(!isset($_POST['cp'])){
    $errores=$errores. 'Falta por rellenar el campo "Código Postal"<br>';        
}else{
    $patronCP= "/(^([0-9]{5,5})|^)$/";
    if(!preg_match($patronCP,$_POST['cp'])){
        $errores=$errores. "Contenido del código postal no es un código postal válido<br>";
    }            
}

// Validación del DNI (El DNI español son 8 caracteres numéricos y una letra): Comprueba si el dato ha sido introducido y si es la letra correcta.    
if(!isset($_POST['dni'])){
    $errores=$errores. 'Falta por rellenar el campo "DNI"<br>';        
}else{
    //Se separan los números de la letra.Lo ponemos en mayúscula.
    $letraDNI = strtoupper(substr($_POST['dni'],8,9));
    $numDNI = substr($_POST['dni'],0,8);
    
    //Se calcula la letra correspondiente al número    
    $letras = ['T','R','W','A','G','M','Y','F','P','D','X','B','N','J','Z','S','Q','V','H','L','C','K','E','T'];
    $letraCorrecta = $letras[$numDNI % 23];        
    
    if((strlen($_POST['dni'])<9)||(strlen($_POST['dni'])>9)){
        $errores=$errores. "Ha introducido un DNI incorrecto<br>";
    }else if($letraDNI!= $letraCorrecta){
        $errores=$errores. "Ha introducido una letra incorrecta en el DNI<br>";
    }            
}    

// Validación del email: Comprueba si el dato ha sido introducido
if(!isset($_POST['email'])){
    $errores=$errores. 'Falta por rellenar el campo "Email"<br>';  
}else{
    //Comprobamos si el patrón coincide con el Email.
    $patronEmail="/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/";       
    if (!preg_match($patronEmail,$_POST['email'])) {
        $errores=$errores. "No es un correo electrónico válido.<br>";
    }           
}

// Validación del Sistema Operativo: Comprueba si el dato ha sido introducido
if(!isset($_POST['so'])){
    $errores=$errores. 'Falta por rellenar el campo "Sistema Operativo"<br>';
}    

// Validación del nº de Horas programadas: Comprueba si el dato ha sido introducido
if(!isset($_POST['horas'])){
    $errores=$errores. 'Falta por rellenar el campo "Horas programadas"<br>'; 
}

// Validación del Sistema Operativo: Comprueba si el dato ha sido introducido
if(!isset($_POST['condiciones'])){
    $errores=$errores. "Tiene que aceptar las Condiciones.<br>";  
}else{
    if(!$_POST['condiciones']){
        $errores=$errores. "Tiene que aceptar las Condiciones.<br>";
    }
}    

// Validamos el formulario...
if(strlen($errores)>0){
    echo "Se han detectado los siguientes errores:<br>";
    echo $errores;
}else{
    echo "Formulario validado :)";
}

Consejos

Para poder validar correctamente un formulario, conviene validarlo en el entorno del cliente y en el entorno del servidor. Con esto evitamos que un usuario malintencionado pueda saltarse la validación front-end, desactivando Javascript mediante el navegador y, enviando datos malintencionados que comprometan la seguridad de nuestra página web.

En cambio, en la versión de HTML5 fué introducido unos nuevos atributos para formularios que permiten realizar la validación del formulario directamente en HTML5. Hablamos de los atributos: required, min,max, pattern…

Una validación correcta y completa, es validar un formulario complementándolo desde el entorno del cliente con HTML5, JavaScript ó jQuery. Y desde el lado del servidor vamos a utilizar PHP. Si el formulario va a trabajar en crear, visualiza, actualizar o borrar información de nuestra base de datos SQL, deberemos de validar las consultas.

Alfredo

Desarrollador web de profesión (.NET, jQuery, JavaScript y SQL Server). Amante del fútbol y los videojuegos. Escribo en este blog sobre temas de programación que me parecen interesantes y que quiero compartir con todo el mundo.

También te podría gustar...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies
A %d blogueros les gusta esto: