2

Este código tiene un efecto en el input con CSS para que se vea bonita y se valida con el required de forma normal, pero cuando uso Javascript y Sweet Alert para que funcione necesito quitarle el required al input, pero pierdo el efecto, no baja la etiqueta.

Funciona bien la página, pero ¿hay alguna forma de que funcione quitando required sin perder el efecto de la etiqueta?.

$("#enviar" ).submit(function( event ) {
var parametros = $(this).serialize();    
var data = new FormData(this);
if($("#nombre").val() == "") { 
swal({
        icon: 'info',
        text: 'Ingrese nombres',
        closeModal: false
        }).then(function() {
        swal.close();
        $('#nombre').focus();
}); 
return false;
}
});
     @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
}
.wrapper{
  width: 450px;
  background: #fff;
  padding: 30px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.wrapper .input-data{
  height: 40px;
  width: 100%;
  position: relative;
}
.wrapper .input-data input{
  height: 100%;
  width: 100%;
  border: none;
  font-size: 17px;
  border-bottom: 2px solid silver;
}
.input-data input:focus ~ label,
.input-data input:valid ~ label{
  transform: translateY(-20px);
  font-size: 15px;
  color: #4158d0;
}
.wrapper .input-data label{
  position: absolute;
  bottom: 10px;
  left: 0;
  color: grey;
  pointer-events: none;
  transition: all 0.3s ease;
}
.input-data .underline{
  position: absolute;
  height: 2px;
  width: 100%;
  bottom: 0;
}
.input-data .underline:before{
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: #4158d0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.input-data input:focus ~ .underline:before,
.input-data input:valid ~ .underline:before{
  transform: scaleX(1);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>PAGINA</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
  <body>
<form id="enviar">    
    <div class="wrapper">
      <div class="input-data">
        <input type="text" id="nombre" required>
        <div class="underline"></div>
        <label>Nombres</label>
      </div>
      <br>
      <input class="btn btn-success" name="registrar" type="submit" value="Registrar">
    </div>
</form>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

0

1 respuesta 1

1

En CSS elimina , .input-data input:valid ~ label, porque sin required el campo automáticamente está validado y toma esa regla.

Ahora solo se necesita una nueva clase isValid y una función para analizar el valor del campo cada que se modifique para agregar o quitar la clase:

$("#enviar" ).submit(function( event ) {
var parametros = $(this).serialize();    
var data = new FormData(this);
if($("#nombre").val() == "") { 
swal({
        icon: 'info',
        text: 'Ingrese nombres',
        closeModal: false
        }).then(function() {
        swal.close();
        $('#nombre').focus();
}); 
return false;
}
});

// Asignar evento para ver los cambios en el campo
$('#nombre').on('change', function() {
   // Cambia la comparación para realizar una validación adecuada
   if($(this).val() == '') {
       // No es válido, quitar clase
       $(this).removeClass('isValid');
   } else {
       // Es válido, agregar clase para mover etiqueta
       $(this).addClass('isValid');
   }
});
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
}
.wrapper{
  width: 450px;
  background: #fff;
  padding: 30px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.wrapper .input-data{
  height: 40px;
  width: 100%;
  position: relative;
}
.wrapper .input-data input{
  height: 100%;
  width: 100%;
  border: none;
  font-size: 17px;
  border-bottom: 2px solid silver;
}
.input-data input:focus ~ label,
input-data input.isValid ~ label {
  transform: translateY(-20px);
  font-size: 15px;
  color: #4158d0;
}
.wrapper .input-data label{
  position: absolute;
  bottom: 10px;
  left: 0;
  color: grey;
  pointer-events: none;
  transition: all 0.3s ease;
}
.input-data .underline{
  position: absolute;
  height: 2px;
  width: 100%;
  bottom: 0;
}
.input-data .underline:before{
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: #4158d0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.input-data input:focus ~ .underline:before,
.input-data input.isValid ~ .underline:before{
  transform: scaleX(1);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>PAGINA</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
  <body>
<form id="enviar">    
    <div class="wrapper">
      <div class="input-data">
        <input type="text" id="nombre">
        <div class="underline"></div>
        <label>Nombres</label>
      </div>
      <br>
      <input class="btn btn-success" name="registrar" type="submit" value="Registrar">
    </div>
</form>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

7
  • Habrá una forma de asignar a todo los tipo imput sin necesidad de poner el id
    – Herless
    Commented el 25 ago. 2020 a las 16:41
  • Creo que perdió el efecto en el label
    – Herless
    Commented el 25 ago. 2020 a las 16:45
  • Sí, solo agrega una clase a todos los input que quieras que aplique, por ejemplo: class="validar" y en Javascript cambias la función del evento: $(.validar').on('change', function() { ... });
    – Triby
    Commented el 25 ago. 2020 a las 16:45
  • No, sigue el efecto de la etiqueta, cuando el campo está vacío se baja. Se sube cuando el campo recibe el foco o no está vacío.
    – Triby
    Commented el 25 ago. 2020 a las 16:47
  • Me refiero al efecto de la linea azul en la caja
    – Herless
    Commented el 25 ago. 2020 a las 16:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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