0

Alguien me podria echar una mano en una validacion de jQuery, quiero comprobar si estan los campos vacios, tambien queria meter la funcion trim(); pero tampoco me sale, lo que quiero conseguir es que me tire el error de que hay campos incompletos pero no doy con la tecla

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Registro Usuario con BootStrap + NodeJS</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
        <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

     <!-- NodeJS sirve para usar JavaScript en el servidor -->
</head>
<script>
       $(document).ready(function() {
            $("#btn_registrarse").click(function(){

                //var contenido = $("#miParrafo").text();

                var campo_nombre = $("#campo_nombre").val();
                var campo_email = $("#campo_email").val();
                var campo_contraseña =$("#campo_contraseña").val();
                var campo_rep_contraseña = $("#campo_rep_contraseña").val();

                if (campo_nombre.length == 0 || campo_email.length == 0|| campo_contraseña.length == 0 || campo_rep_contraseña.length == 0) {
                    alert("No puede haber campos vacios");
                }
                else{
                    alert("Todo correcto");
                }


            });
        }); 
</script>
<style>
    body{
        background-image: url('https://imagenesfotos.com/wp-content/2009/07/abstract-18.jpg');
        color:white;

    }
    #logo_registro{

    }
    .row{
        margin-bottom: 10px;

    }


</style>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <img src="https://seeklogo.com/images/M/MSN_Messenger-logo-000410C523-seeklogo.com.png" alt="" id="logo_registro">
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 text-center">
                <h1>Registro</h1>
            </div>
        </div>
        <div class="row">

            <div class="col-md-6 col-md-offset-3" >
                <label class="col-md-1 control-label">Nombre</label>
                <input type="text" class="form-control" name="nombre" id="campo_nombre" />
            </div>

        </div>
        <div class="row">

            <div class="col-md-6 col-md-offset-3">
                <label class="col-md-1 control-label">Email</label>
                <input type="email" class="form-control" name="nombre"  id="campo_email" />
            </div>

        </div>
        <div class="row">

            <div class="col-md-6 col-md-offset-3">
                <label class="col-md-1 control-label">Contraseña</label>
                <input type="password" class="form-control" name="nombre"  id="campo_contraseña" />
            </div>

        </div>
        <div class="row">

            <div class="col-md-6 col-md-offset-3">
                <label class="col-md-4 control-label">Repetir contraseña</label>
                <input type="password" class="form-control" name="nombre"  id="campo_rep_contraseña" />
            </div>

        </div>
        <div class="row">
            <div class="col-md-1 col-md-offset-3">
                <button type="button" class="btn btn-info" id="btn_registrarse">Registrarse</button>
            </div>
        </div>

        </div>
    </div>

</body>
</html>
1
  • Una forma rápida de obligar a que el usuario meta valores en los campos un formulario es añadirles la etiqueda required. <input type="text" name="tu_variable" required>. También funciona con textarea, select y otros.
    – aeportugal
    el 30 abr. 2018 a las 20:49

3 respuestas 3

1

Corregí unas etiquetas de cierre, y el orden en que llamas a los scripts.

trim() se usa para limpiar los espacios al principio y al final de alguna cadena.

Saludos

$(document).ready(function() {
  $("#btn_registrarse").click(function() {

    //var contenido = $("#miParrafo").text();

    var campo_nombre = $("#campo_nombre").val().trim();
    var campo_email = $("#campo_email").val().trim();
    var campo_contraseña = $("#campo_contraseña").val().trim();
    var campo_rep_contraseña = $("#campo_rep_contraseña").val().trim();

    //si esta vacio lanza error
    if (campo_nombre.length == 0 ||
      campo_email.length == 0 ||
      campo_contraseña.length == 0 ||
      campo_rep_contraseña.length == 0) {
      alert("No puede haber campos vacios");
    } else {
      alert("Todo correcto");
    }


  });
});
body {
  background-image: url('https://imagenesfotos.com/wp-content/2009/07/abstract-18.jpg');
  color: white;
}

#logo_registro {}

.row {
  margin-bottom: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Registro Usuario con BootStrap + NodeJS</title>



  <!-- NodeJS sirve para usar JavaScript en el servidor -->
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <img src="https://seeklogo.com/images/M/MSN_Messenger-logo-000410C523-seeklogo.com.png" alt="" id="logo_registro">
      </div>
    </div>

    <div class="row">
      <div class="col-md-12 text-center">
        <h1>Registro</h1>
      </div>
    </div>
    <div class="row">

      <div class="col-md-6 col-md-offset-3">
        <label class="col-md-1 control-label">Nombre</label>
        <input type="text" class="form-control" name="nombre" id="campo_nombre" />
      </div>

    </div>
    <div class="row">

      <div class="col-md-6 col-md-offset-3">
        <label class="col-md-1 control-label">Email</label>
        <input type="email" class="form-control" name="nombre" id="campo_email" />
      </div>

    </div>
    <div class="row">

      <div class="col-md-6 col-md-offset-3">
        <label class="col-md-1 control-label">Contraseña</label>
        <input type="password" class="form-control" name="nombre" id="campo_contraseña" />
      </div>

    </div>
    <div class="row">

      <div class="col-md-6 col-md-offset-3">
        <label class="col-md-4 control-label">Repetir contraseña</label>
        <input type="password" class="form-control" name="nombre" id="campo_rep_contraseña" />
      </div>

    </div>
    <div class="row">
      <div class="col-md-1 col-md-offset-3">
        <button type="button" class="btn btn-info" id="btn_registrarse">Registrarse</button>
      </div>
    </div>

  </div>
</body>

</html>

11
  • No entiendo, a mi no me va. He copiado y pegado el body entero y lo he puesto. No entiendo donde has situado tu los scripts , yo lo tengo entre el head y el body. Y los imports lo tengo ppuesto dentro del head. Y no me va, no lo entiendo
    – josanangel
    el 30 abr. 2018 a las 21:18
  • El script ponlo justo al final del body, antes de esta etiqueta </body>
    – Alvarez
    el 30 abr. 2018 a las 21:20
  • Vale, lo que he hecho para probar es poner un laert("hola mundo"); y no me lo hace al hacer clickno se de que puede ser
    – josanangel
    el 30 abr. 2018 a las 21:22
  • Te has fijado en la consola del navegador si sale algun error? Apretando F12 puedes verla
    – Alvarez
    el 30 abr. 2018 a las 21:25
  • 1
    Continuemos el debate en el chat.
    – Alvarez
    el 30 abr. 2018 a las 21:50
1

Para validar que todos tus inputs no estén vacíos puedes aplicar un each() a todos los inputs de tu formulario, así nos evitamos poner una validación por cada input que se agregue posteriormente. Y luego revisar su valor con la función val() e ir agregando una clase o mensaje según lo requieras

$('#btn_registrarse').on('click', function() {
  $('input').each(function(index, item){
    var $input = $(item);
    $input.closest('div').removeClass('has-error');
    if ($input.val().trim() == '') {
      $input.closest('div').addClass('has-error');
    }
  });
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-12 text-center">
      <img src="https://seeklogo.com/images/M/MSN_Messenger-logo-000410C523-seeklogo.com.png" alt="" id="logo_registro">
    </div>
  </div>

  <div class="row">
    <div class="col-md-12 text-center">
      <h1>Registro</h1>
    </div>
  </div>
  <div class="row">

    <div class="col-md-6 col-md-offset-3">
      <label class="col-md-1 control-label">Nombre</label>
      <input type="text" class="form-control" name="nombre" id="campo_nombre" />
    </div>

  </div>
  <div class="row">

    <div class="col-md-6 col-md-offset-3">
      <label class="col-md-1 control-label">Email</label>
      <input type="email" class="form-control" name="nombre" id="campo_email" />
    </div>

  </div>
  <div class="row">

    <div class="col-md-6 col-md-offset-3">
      <label class="col-md-1 control-label">Contraseña</label>
      <input type="password" class="form-control" name="nombre" id="campo_contraseña" />
    </div>

  </div>
  <div class="row">

    <div class="col-md-6 col-md-offset-3">
      <label class="col-md-4 control-label">Repetir contraseña</label>
      <input type="password" class="form-control" name="nombre" id="campo_rep_contraseña" />
    </div>

  </div>
  <div class="row">
    <div class="col-md-1 col-md-offset-3">
      <button type="button" class="btn btn-info" id="btn_registrarse">Registrarse</button>
    </div>
  </div>

</div>

0

Intenta con lo siguiente:

$("#btn_registrarse").click(function(){

    //var contenido = $("#miParrafo").text();
    var campo_nombre = $("#campo_nombre").val().trim();
    var campo_email = $("#campo_email").val().trim();
    var campo_contraseña =$("#campo_contraseña").val().trim();
    var campo_rep_contraseña = $("#campo_rep_contraseña").val().trim();

    if (campo_nombre.length == 0 || campo_email.length == 0|| campo_contraseña.length == 0 || campo_rep_contraseña.length == 0) {
        alert("No puede haber campos vacios");
    }
    else{
        alert("Todo correcto");
    }

});

La función val() te devuelve una cadena y la función trim() pertenece a los objetos de ese tipo.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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