¿Se puede personalizar el mensaje de alerta para que en lugar de que me salga el alert("mensaje que deseemos);
me aparezca el <input>
correspondiente de un color rojo para denotar que está erróneo el campo?
¿O también se podría centrar el mensaje del alert();
para que salga en mitad del formulario y asi hacer click, con unos estilos más vistosos?
function validar() {
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;
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
background: #204862;
}
h1 {
margin-top: 100px;
color: #fff;
text-align: center;
}
.form-register {
width: 95%;
max-width: 500px;
margin: auto;
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-2 {
width: 48%;
}
.input-1 {
width: 98%;
}
.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.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();">
<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">
<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" tabindex="4" class="input-2">
<input type="text" name="telefono" id="telefono" placeholder="Teléfono" tabindex="5" class="input-2">
<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>
<!--<div class="footer">
<p>Copyrigth</p>
</div>-->
</body>
</html>