Alert message - HTML - CSS [duplicated]

Question

Alert message - HTML - CSS [duplicated]

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

1

Is it possible to customize the alert message so that instead of the alert("mensaje que deseemos); coming out I see the corresponding <input> of a red color to denote that the field is wrong?

Or could you also center the message of the alert(); to come out in the middle of the form and thus click, with more colorful styles?

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>

javascript html

asked by omaza1990 08.11.2017 в 23:12

source

3 answers

array of arrays count_values php How to paint displaced bars in ASP.NET Charts

score 0 · Answer 1

Lately the styles of the browser alert can not be changed in any way, but there are very complete and great libraries that help to create alerts with a very visual design, among those libraries I recommend sweetalert , is what I use is very complete and functional.

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

score 0 · Answer 2

Another option is to use the JQuery plugin called MsgBox and customize it with css.

I'll give you an example:

$.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>

score 0 · Answer 3

I recommend the library of alertify for jQuery, in my opinion it is very simple to use and at the same time very complete, both in the handling of emergent messages and as in prompt.

It already brings its own styles so it will be very useful in handling error messages.

link

Implementation:

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>