Validation Form jQuery

Question

Validation Form jQuery

Navigation

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

0

Someone could give me a hand in a jQuery validation, I want to check if the fields are empty, I also wanted to put the function trim(); but I do not get it either, what I want to achieve is that I throw away the error that there are incomplete fields but I do not give with the key

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

jquery formularios

asked by josanangel 30.04.2018 в 22:44

source

3 answers

how to make a query that compares two data of a table in LinQ How to pass a data from Javascript to Php Laravel

score 1 · Answer 1

I corrected some closing tags, and the order in which you call the scripts.

trim () is used to clean spaces at the beginning and end of a string.

Greetings

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

score 0 · Answer 2

Try the following:

$("#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");
    }

});

The val () function returns a string and the trim () function belongs to objects of that type.

score 0 · Answer 3

To validate that all your inputs are not empty you can apply a each() to all the inputs of your form, so we avoid putting a validation for each input that is added later. And then check its value with the function val() and add a class or message as required

$('#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>