1

¿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>

2
  • 2
    Los estilos del mensaje de alerta no se puede modificar.
    – zerokira
    Commented el 8 nov. 2017 a las 22:13
  • los alert no se pueden modificar por medio de css porque no forman parte del DOM, hay una librería llamada sweet alert con la que puede solucionar el problema, es una emulación de los alert personalizable
    – Rene Limon
    Commented el 8 nov. 2017 a las 22:19

3 respuestas 3

0

Lastimosamente los estilos del alert del navegador no se pueden cambiar de ninguna manera, pero existen librerías muy completas y geniales que ayudan a crear alerts con un diseño muy visual, entre esas librerías te recomiendo sweetalert, es la que yo uso es muy completa y funcional.

swal ( "Oops" ,  "Something went wrong!" ,  "error" )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.11.4/sweetalert2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.11.4/sweetalert2.min.css">

0

Otra opción es usar el plugin de JQuery llamado MsgBox y personalizarlo con css.

Te dejo un ejemplo:

$.alert("soy el mapa soy el mapa soy el mapa!");
.msgbox-msg {
  color: crimson;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://raw.githack.com/composite/jQuery.MsgBox/master/jquery.msgbox.min.js"></script>

0

Recomiendo la librería de alertify para jQuery, a mi parecer es muy sencilla de utilizar y a la vez muy completa, tanto en el manejo de mensajes emergentes y como en prompt.

Ya trae sus propios estilos así que te sera muy útil en el manejo de mensajes de errores.

https://alertifyjs.org

Implementación:

alertify.error("El nombre debe tener menos de 21 carácteres.");
<script src="https://cdn.rawgit.com/alertifyjs/alertify.js/v1.0.10/dist/js/alertify.js"></script>

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