25 Oct Validar DNI con JavaScript y PHP
En este post vamos a validar el DNI de los usuarios para comprobar que existan y no se repitan.
Lo vamos a hacer con JavaScript y PHP.
Puedes descargarte el archivo completo al final de la entreda.
No hace mucho me encontré con un proyecto de votaciones con el que cada usuario sólo podía votar una sola vez. Y no podría conseguirlo sólo con perdirle el correo electrónico aunque sea validándolo, porque la gran mayoría de gente utiliza más de un e-amil, a parte que existen servicios de cuentas de correo temporales (yopmail, emailtemporalgratis).
Entonces me encontré por internet con un script al que le pones los números de tu dni y automáticamente te dice la letra. Pero en éste tutorial pediremos todo el DNI y comprobaremos que sea real.
Primero de todo creamos una carpeta con un archivo index.php, un archivo validar.php y una carpeta css con dos archivos -> main.css y reset.css.
Dentro del archivo index.php escribimos lo siguiente:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Validar DNI</title> <link href="css/reset.css" rel="stylesheet" style="text/css" /> <link href="css/main.css" rel="stylesheet" style="text/css" media="screen" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> </head> <body> <div id="container"> <div class="mensaje"></div> <h1>Validación de DNI</h1> <form action="validar.php" method="post"> <fieldset> <legend>Introduce tu DNI con letra</legend> <p> <label for="dni">Dni</label> <br> <input type="text" id="dni" name="dni" placeholder="Ejmpl:00000000-A"> <br> <span>Rellena el campo por favor</span> </p> <p> <input type="submit" value="Validar"> </p> </fieldset> </form> </div> </body> </html>
Primero de todo, linkamos los css y jQuery entre la etiqueta head. Dentro de un div #container le añadimos un div .mensaje donde mostraremos el mensaje de validación del DNI y un formulario con un campo de texto.
Y le damos los estilos css necesarios dentro del archivo main.css que hemos incluido arriba:
body {
font-family: Arial, Verdana, sans-serif;
background-color: #f5f5f5;
}
#container {
text-align: center;
max-width: 500px;
margin: 20px auto;
padding: 20px;
}
h1 {
font-size: 30px;
font-weight: bold;
margin-bottom: 20px;
}
form {
background-color: #fff;
border: 1px solid #cecece;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
padding: 20px;
}
form legend {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
input[type="text"] {
padding: 10px;
margin: 10px 0px;
text-align: center;
border: 1px solid #cecece;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
}
span {
color: red;
margin-bottom: 10px;
display: block;
}
input[type="submit"] {
font-size: 18px;
cursor: pointer;
}
.mensaje {
color: red;
font-weight: bold;
font-size: 40px;
background-color: #fff;
margin-bottom: 30px;
}
.green {
color: green;
}
Antes de la etiqueta body, le añadiremos un script para validar el formulario, pero sólo mostraremos un mensaje en el caso de que el input esté vacio:
<script type="text/javascript">
$(document).ready(function(){
//ocultamos span
$('span').hide();
var dni = document.getElementById('dni');
$('form').submit(function(){
if($(dni).val() == ''){
$('span').slideDown();
$('input[type="text"]').css('border','1px solid red');
return false;
}
});
});
</script>
Ocultamos el span donde muestra el texto «Rellena el campo por favor», y le decimos que si al enviar el formulario el campo está vacio, que mueste el span con $(‘span’).slideDown();.
Ahora nos toca validar el DNI. Para ello dentro del archivo validar.php que hemos creado antes, pegamos lo siguiente:
<?php
//variable dni
$dni = $_POST['dni'];
//Comprobamos que el dni sea correcto
$falso = 0;
$partes = explode('-', $dni);
$numeros = $partes[0];
$letra = strtoupper($partes[1]);
if (substr("TRWAGMYFPDXBNJZSQVHLCKE",$numeros%23,1) != $letra){
$falso = 1;
}
if ($falso == 1) {
header('Location:index.php?f=f');
}
else
{
header('Location:index.php?t=t');
}
?>
Creamos la variable $dni que es la que pasamos por POST y comprobamos que la letra del DNI sea la correcta. Si el dni es falso, lo redireccionamos al index.php con una variable f y por el contrario, con una variable t. De esta forma, le en el index le decimos que depende de la variable que recibamos, muestra un mensaje u otro de la siguiente manera:
<?php
$f = 0;
$t = 0;
if (isset($_REQUEST['f'])) {
$f = 1;
}
if (isset($_REQUEST['t'])) {
$t = 1;
}
?>
Le asignamos valor 0 a las dos variables f y t y en el caso de que exista alguna de las dos, le damos un valor 1 con -> if (isset($_REQUEST[‘t’])).
Ahora es cuando en el div .mensaje mostraremos el mensaje de validación:
<div class="mensaje">
<?php
if ($f == 1) {
echo "<h2>El DNI ES INCORRECTO</h2>";
}
if ($t == 1) {
echo '<h2 class="green">EL DNI ES CORRECTO</h2>';
}
?>
</div>
Si f (dni falso) es == a 1 muestra incorrecto, si t es == a 1 muestra correcto. Y el archivo index.php quedaría de la siguiente manera:
<?php
$f = 0;
$t = 0;
if (isset($_REQUEST['f'])) {
$f = 1;
}
if (isset($_REQUEST['t'])) {
$t = 1;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Validar DNI</title>
<link href="css/reset.css" rel="stylesheet" style="text/css" />
<link href="css/main.css" rel="stylesheet" style="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="mensaje">
<?php
if ($f == 1) {
echo "<h2>El DNI ES INCORRECTO</h2>";
}
if ($t == 1) {
echo '<h2 class="green">EL DNI ES CORRECTO</h2>';
}
?>
</div>
<h1>Validación de DNI</h1>
<form action="validar.php" method="post">
<fieldset>
<legend>Introduce tu DNI con letra</legend>
<p>
<label for="dni">Dni</label>
<br>
<input type="text" id="dni" name="dni" placeholder="Ejmpl:00000000-A">
<br>
<span>Rellena el campo por favor</span>
</p>
<p>
<input type="submit" value="Validar">
</p>
</fieldset>
</form>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
//ocultamos span
$('span').hide();
var dni = document.getElementById('dni');
$('form').submit(function(){
if($(dni).val() == ''){
$('span').slideDown();
$('input[type="text"]').css('border','1px solid red');
return false;
}
});
});
</script>
</html>
Bueno, espero que haya servido de ayuda. Puedes descargarte el archivo en el siguiente botón:
Para cualquier duda deja un comentario o ponte en contacto conmigo 😉
No hay comentarios