3

Dispongo de un formulario HTML donde un input es DNI. En el DNI quiero validar que se escriban sólo números y letras, además que contenta una expresión regular que sea 8dígitos junto con una letra (la letra se coloque en mayúsculas mediante .toUpperCase()).

HTML

<input type="text" name="dni" id="dni" placeholder="DNI" maxlength="9" tabindex="4" class="input-2" onkeypress="return soloLetrasNumeros(event);">

La idea es que en el campo DNI de tipo "input" se validen dos comprobaciones: que cada tecla pulsada, con el evento onKeyPress() sea solamente un número o una letra, y que al perder el foco el campo o cuando sea pulsado el botón "Enviar formulario" se compruebe si realmente contiene 8 dígitos y una letra, otra opción sería que con el método "onChange" comprobar cuando es correcto (poner el fondo verde del campo) o si es incorrecto (poner el fondo de color rojo).

¿Sería posible realizar la idea que tengo en dos funciones o habría que englobarlo en una?

  function validar_formulario(){
    var nombre, apellidos, email, dni, telefono, password1, password2;
    var expresion;

    nombre = document.getElementById("nombre").value;
    apellidos = document.getElementById("apellidos").value;
    email = document.getElementById("email").value;
    dni = document.getElementById("dni").value;
    telefono = document.getElementById("telefono").value;
    password1 = document.getElementById("password1").value;
    password2 = document.getElementById("password2").value;

    expresion = /^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,4})$/;

    if(nombre=="" || apellidos=="" || email=="" || dni=="" || telefono=="" || password1=="" || password2==""){
        alert("Todos los campos son obligatorios.");
        return false;
    }else if(nombre.length>20){
        alert("El nombre debe tener menos de 21 carácteres.");
        document.getElementById("nombre").focus();
        return false;
    }else if(apellidos.length>50){
        alert("Los apellidos superan los 50 carácteres de límite.");
        document.getElementById("apellidos").focus();
        return false;
    }else if(!expresion.test(email)){
        alert("El formato del email es incorrecto.");
        document.getElementById("email").value = "";
        document.getElementById("email").focus();
        return false;
    }else if(email.length>50){
        alert("El email debe tener menos de 51 carácteres.");
        document.getElementById("email").value = "";
        document.getElementById("email").focus();
        return false;
    }else if(dni.length!=9){
        alert("El DNI debe tener exactamente 9 carácteres.");
        document.getElementById("dni").value = "";
        document.getElementById("dni").focus();
        return false;
    }else if(telefono.length!=9){
        alert("El teléfono debe tener exactamente 9 carácteres.");
        document.getElementById("telefono").value = "";
        document.getElementById("telefono").focus();
        return false;
    }else if(isNaN(telefono)){
        alert("El teléfono debe contener únicamente dígitos.");
        document.getElementById("telefono").value = "";
        document.getElementById("telefono").focus();
        return false;
    }else if(password1 != password2){
        alert("Las contraseñas no coinciden.");
        document.getElementById("password1").value = "";
        document.getElementById("password2").value = "";
        document.getElementById("password1").focus();
        return false;
    }
}

function validar_formulario(){
	var nombre, apellidos, email, dni, telefono, password1, password2;
	var expresion;
	
	nombre = document.getElementById("nombre").value;
	apellidos = document.getElementById("apellidos").value;
	email = document.getElementById("email").value;
	dni = document.getElementById("dni").value;
	telefono = document.getElementById("telefono").value;
	password1 = document.getElementById("password1").value;
	password2 = document.getElementById("password2").value;
	
	expresion = /^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,4})$/;
	
	if(nombre=="" || apellidos=="" || email=="" || dni=="" || telefono=="" || password1=="" || password2==""){
		alert("Todos los campos son obligatorios.");
		return false;
	}else if(nombre.length>20){
		alert("El nombre debe tener menos de 21 carácteres.");
		document.getElementById("nombre").focus();
		return false;
	}else if(apellidos.length>50){
		alert("Los apellidos superan los 50 carácteres de límite.");
		document.getElementById("apellidos").focus();
		return false;
	}else if(!expresion.test(email)){
		alert("El formato del email es incorrecto.");
		document.getElementById("email").value = "";
		document.getElementById("email").focus();
		return false;
	}else if(email.length>50){
		alert("El email debe tener menos de 51 carácteres.");
		document.getElementById("email").value = "";
		document.getElementById("email").focus();
		return false;
	}else if(dni.length!=9){
		alert("El DNI debe tener exactamente 9 carácteres.");
		document.getElementById("dni").value = "";
		document.getElementById("dni").focus();
		return false;
	}else if(telefono.length!=9){
		alert("El teléfono debe tener exactamente 9 carácteres.");
		document.getElementById("telefono").value = "";
		document.getElementById("telefono").focus();
		return false;
	}else if(isNaN(telefono)){
		alert("El teléfono debe contener únicamente dígitos.");
		document.getElementById("telefono").value = "";
		document.getElementById("telefono").focus();
		return false;
	}else if(password1 != password2){
		alert("Las contraseñas no coinciden.");
		document.getElementById("password1").value = "";
		document.getElementById("password2").value = "";
		document.getElementById("password1").focus();
		return false;
	}
}


function soloLetrasNumeros(e){
	var tecla = (document.all) ? e.keyCode : e.which;
    //Permitimos el acceso a una tecla "Retroceso".  <--
    if (tecla == 8){
        return true;
    }
	//Patrón de entrada: solo aceptamos números.
    var patron = /[0-9A-Za-z]/;
    var tecla_final = String.fromCharCode(tecla);
    return patron.test(tecla_final);
}
*{
	box-sizing: border-box;
}

body{
	margin: 0;
	font-family: sans-serif;
	background: #DEDEDE;
}

h1{
	margin-top: 100px;
	color: #fff;
	text-align: center;
}

.form-register{
	width: 95%;
	max-width: 490px;
	margin: auto;
	margin-top: 150px;
	background: white;
	border-radius: 7px;
}

.form-titulo{
	background: green;
	color: #fff;
	padding: 20px;
	text-align: center;
	font-weight: 100;
	font-size: 30px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	border-bottom: 5px solid red;
}

.contenedor-inputs{
	padding: 2px 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

input{
	margin-bottom: 15px;
	padding: 4px;
	font-size: 12px;
	border-radius: 3px;
	border: 1px solid black;
}

label{
	font-size: 16px;
}



.input-1{
	width: 98%;
}

.input-2{
	width: 48%;
}

.registrar{
	background: crimson;
	color: #fff;
	margin: auto;
	padding: 10px 40px;
	cursor: pointer;
	font-size: 12px;
}

.registrar:active{
	transform: scale(1.05);
}

.form-link{
	width: 100%;
	margin: 7px;
	text-align: center;
	font-size: 14px;
}

.footer{
	color: #fff;
	text-align: center;
	font-size: 14px;
	position: relative;
	margin-top: 150px;
	height: 40px;
	padding:5px 0px;
	clear: both;
}
<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="UTF-8">
		<title>Formulario de Registro</title>
		<link rel="stylesheet" href="estilos_registrar.css">
		<script type="text/javascript" src="validar_formulario.js"></script>
	</head>
	<body>
		<!--<h1>Formulario de Registro</h1>-->
		<form name="miformulario" id="miformulario" action="registrar.php" method="POST" class="form-register" onsubmit="return validar_formulario();">
			<h2 class="form-titulo">CREA UNA CUENTA</h2>
			<div class="contenedor-inputs">
				<!-- Por cada etiqueta de <input> <label for="id_mismo_que_input">XXXX: </label> -->
				<input type="text" name="nombre" id="nombre" placeholder="Nombre" tabindex="1" class="input-2" onkeypress="return soloLetras(event);"> <!-- required para HTML5 -->
				<input type="text" name="apellidos" id="apellidos" placeholder="Apellidos" tabindex="2" class="input-2">
				<br/>
				<input type="text" name="email" id="email" placeholder="Email" tabindex="3" class="input-1">
				<br/>
				<input type="text" name="dni" id="dni" placeholder="DNI" maxlength="9" tabindex="4" class="input-2" onkeypress="return soloLetrasNumeros(event);">
				<input type="text" name="telefono" id="telefono" placeholder="Teléfono" maxlength="9" tabindex="5" class="input-2" onkeypress="return soloNumeros(event);">
				<br/>
				<input type="password" name="password" id="password1" placeholder="Contraseña" tabindex="6" class="input-2">
				<input type="password" name="password" id="password2" placeholder="Repetir contraseña" tabindex="7" class="input-2">
				<br/>
				<input type="submit" value="Registrar" name="registrar" class="registrar" tabindex="8"/>
				<?php
					include "Clases/BD.php";
					//Si pulsamos el botón insertar...
					if(isset($_POST["registrar"])){
						$nombre = $_POST["nombre"];
						$apellidos = $_POST["apellidos"];
						$dni = $_POST["dni"];
						$telefono = $_POST["telefono"];
						$email = $_POST["email"];
						$password = $_POST["password"];
						//Llamamos al método "insertarCliente" y le pasamos los parámetros del formulario.
						BD::insertarCliente($email, $nombre, $apellidos, $dni, $telefono, $password);
					}
				?>
				<p class="form-link">¿Ya tienes una cuenta? <a href="iniciar_sesion.php">Ingresa aquí</a></p>
			</div>
		</form>
	</body>
</html>

3
  • En esta pregunta se trata el tema de solo dejar numeros. Puedes usarlo para orientarte y dejar tambien letras. Un saludo
    – lois6b
    Commented el 10 nov. 2017 a las 15:10
  • Por otro lado, hay algo ilógico en la pregunta. Si alguien respondiera literalmente a tu pregunta, el resultado sería que muestre una alerta para cada una de las 8 teclas que presiona el usuario antes de tener un DNI de 9 caracteres correcto... ¿Cómo es eso de validar mientras escribe? ¿La validación no es después de que terminó de escribir y se va el foco del input, o intenta enviar el formulario? ... ¿Podrías editar la pregunta con más detalle de cuál es el comportamiento esperado, paso a paso?
    – Mariano
    Commented el 11 nov. 2017 a las 4:55
  • Creo que la pregunta está bien propuesta. La idea es que en el campo DNI de tipo "<input>" se validen dos comprobaciones: que cada tecla pulsada, con el evento onKeyPress() sea solamente un número o una letra, y que al perder el foco el campo o cuando sea pulsado el botón "Enviar formulario" se compruebe si realmente contiene 8 dígitos y una letra.
    – omaza1990
    Commented el 11 nov. 2017 a las 10:34

2 respuestas 2

3

De hecho, deberías hacerlo así, crear dos funciones:

  • Una para validar el DNI (una vez completo)
  • Otra para validar el digito que se introduce en el onkeypress

Opcion A

En el onkeypress la función para que solo se metan letras y números y una función onchange para cuando termines de escribir el dni y pierdas el foco del input, se active.

Opcion B

Crear una sola función que se llame validación y que se active en cada onKeyPress, dicha función primero comprueba que sea letra mayúscula o numero y despues cuenta el numero de digitos que tiene el input, si es igual a 8 significa que se ha introducido el DNI completo, con lo cual no te deja ecribir mas y automáticamente te valida el DNI (resto de la funcion).

2
  • Hola Cobas, esto no responde a la pregunta. Si es una guia pero no es la explicacion necesaria para responder. Mira Cómo responder para mejorarla. Un saludo
    – lois6b
    Commented el 10 nov. 2017 a las 15:08
  • ¿Alguna posible ayuda o propuesta más visible con un ejemplo de código?
    – omaza1990
    Commented el 11 nov. 2017 a las 14:53
0

Si solo quieres validar DNI, 8 números + 1 letra, podrías usar un patrón similar a este

/[0-9]{8}[A-Z]?/g

Con esto, te aseguras que no puedan meterte letras en medio del DNI.

Yo personalmente, prefiero validar en el evento OnBlur, usando esta función, que admite también NIE y NIF

function valida_nif_cif_nie(a) {
    var resul = true;
    var temp = a.toUpperCase();
    var cadenadni = "TRWAGMYFPDXBNJZSQVHLCKE";
    if (temp !== '') {
        //algoritmo para comprobacion de codigos tipo CIF
        suma = parseInt(temp.charAt(2)) + parseInt(temp.charAt(4)) + parseInt(temp.charAt(6));
        for (i = 1; i < 8; i += 2) {
            temp1 = 2 * parseInt(temp.charAt(i));
            temp1 += '';
            temp1 = temp1.substring(0,1);
            temp2 = 2 * parseInt(temp.charAt(i));
            temp2 += '';
            temp2 = temp2.substring(1,2);
            if (temp2 == '') {
                temp2 = '0';
            }
            suma += (parseInt(temp1) + parseInt(temp2));
        }
        suma += '';
        n = 10 - parseInt(suma.substring(suma.length-1, suma.length));
        //si no tiene un formato valido devuelve error
        if ((!/^[A-Z]{1}[0-9]{7}[A-Z0-9]{1}$/.test(temp) && !/^[T]{1}[A-Z0-9]{8}$/.test(temp)) && !/^[0-9]{8}[A-Z]{1}$/.test(temp)) {
            if ((temp.length == 9) && (/^[0-9]{9}$/.test(temp))) {
                var posicion = temp.substring(8,0) % 23;
                var letra = cadenadni.charAt(posicion);
                var letradni = temp.charAt(8);
                resul = false;
            } else if (temp.length == 8) {
                if (/^[0-9]{1}/.test(temp)) {
                    var posicion = temp.substring(8,0) % 23;
                    var letra = cadenadni.charAt(posicion);
                    var tipo = 'NIF';
                } else if (/^[KLM]{1}/.test(temp)) {
                    var letra = String.fromCharCode(64 + n);
                    var tipo = 'NIF';
                } else if (/^[ABCDEFGHJNPQRSUVW]{1}/.test(temp)) {
                    var letra = String.fromCharCode(64 + n);
                    var tipo = 'CIF';
                } else if (/^[T]{1}/.test(temp)) {
                    var letra = String.fromCharCode(64 + n);
                    var tipo = 'NIE';
                } else if (/^[XYZ]{1}/.test(temp)) {
                    var pos = str_replace(['X', 'Y', 'Z'], ['0','1','2'], temp).substring(0, 8) % 23;
                    var letra = cadenadni.substring(pos, pos + 1);
                    var tipo = 'NIE';
                }
                if (letra !== '') {
                } else {
                }
                resul = false;
            } else if (temp.length < 8) {
                resul = false;
            } else {
                resul = false;
            }
        }
        //comprobacion de NIFs estandar
        else if (/^[0-9]{8}[A-Z]{1}$/.test(temp)) {
            var posicion = temp.substring(8,0) % 23;
            var letra = cadenadni.charAt(posicion);
            var letradni = temp.charAt(8);
            if (letra == letradni) {
                resul = true;
            } else if (letra != letradni) {
                resul = false;
            } else {
                resul = false;
            }

        }
        //comprobacion de NIFs especiales (se calculan como CIFs)
        else if (/^[KLM]{1}/.test(temp)) {
            if (temp[8] == String.fromCharCode(64 + n)) {
               resul = true;
            } else if (temp[8] != String.fromCharCode(64 + n)) {
                resul = false;
            } else {
                resul = false;
            }
        }
        //comprobacion de CIFs
        else if (/^[ABCDEFGHJNPQRSUVW]{1}/.test(temp)) {
            var temp_n = n + '';
            var letra=parseInt(temp_n.substring(temp_n.length-1, temp_n.length));
            var letra2= String.fromCharCode(64 + n);
            //alert (letra);
            //alert (letra2);
            if (temp.charAt(8) ==  letra2 || temp.charAt(8) == letra) {
                resul = true;
            } else if (temp.charAt(8) != letra2) {
                 resul = false;
            } else if (temp.charAt(8) != letra) {
                 resul = false;
            } else {
                 resul = false;
            }
        }
        //comprobacion de NIEs
        //T
        else if (/^[T]{1}/.test(temp)) {
            if (temp[8] == /^[T]{1}[A-Z0-9]{8}$/.test(temp)) {
                return 3;
            } else if (temp[8] != /^[T]{1}[A-Z0-9]{8}$/.test(temp)) {
                var letra = String.fromCharCode(64 + n);
                var letranie = temp.charAt(8);
                if (letra != letranie) {
                    resul = false;
                } else {
                    resul = false;
                }
            }
        }
        //XYZ
        else if (/^[XYZ]{1}/.test(temp)) 
        {
            //var pos = str_replace(['X', 'Y', 'Z'], ['0','1','2'], temp).substring(0, 8) % 23;
            if (/^[X]{1}/.test(temp))
            {
                temp=temp.replace('X', '0');
            }
            else if (/^[Y]{1}/.test(temp))
            {
                temp=temp.replace('Y', '1');
            }
            else if (/^[Z]{1}/.test(temp))
            {
                temp=temp.replace('Z', '2');
            }

            var pos=temp.substring(0, 8) % 23;
            var letra = cadenadni.substring(pos, pos + 1);
            var letranie = temp.charAt(8);
            if (letranie == letra) 
            {
                resul = true;
            } 
            else if (letranie != letra)
            {
                resul = false;
            } else {
                resul = false;
            }
        }
    }
    return resul;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.