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>