Me gustaría hacer la verificación de una entrada del usuario "en vivo". Por ejemplo, hasta que el usuario no haya escrito al menos 4 caracteres en la entrada, el formulario debe estar rodeado de rojo.

Por ahora, aquí está mi código, donde el color rojo solo aparece después de que el usuario envíe el formulario:

$(function(){

        $("form").on("submit", function() {

          if($("input").val().length < 4) {

            $("div.modal-dialog").addClass("has-error");

            $("div.alert").show("slow").delay(4000).hide("slow");

            return false;

          }

        });

      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">      
      <div id="html">
        <button data-toggle="modal" data-backdrop="false" href="#formu" class="btn btn-primary">Informations</button>
      </div>
      <div class="modal fade" id="formulaire">
        <div class="modal-dialog">
          <div class="modal-content">

            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">x</button>
              <h4 class="modal-title">Your infos :</h4>
            </div>

            <div class="modal-body">
              <form action="#">

                <div class="form-group">
                  <label for="nom">Nom</label>
                  <input type="text" class="form-control" name ="nom" id="nom" placeholder="Votre nom">
                </div>

                <button type="submit" class="btn btn-default">Envoyer</button>
              </form>

            </div>

          </div>
        </div>
    </div>
</div>

Ya revisé en Google y hay una biblioteca llamada Formvalidation pero está pagando, me gustaría poder hacer este efecto sin ninguna biblioteca adicional que no sea jQuery.

0
juRioqs75 5 mar. 2017 a las 14:06

2 respuestas

La mejor respuesta

Por favor revise este código

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<script type="text/javascript">

$(document).ready(function () {

    $('#test_form').validate({ 
        focusInvalid: true,
        onkeyup: true,
        rules: {
            nom: {
                required: true,
                minlength: 4
            }
        },
        messages: {
            nom: {
                required: "Nom is required."
            }
        },errorPlacement: function (error, element) {
        alert(error.text());
    }
    });

});
</script>

<style type="text/css">
label.error {
border: 1px solid red;
color: red;
}
</style>

Y este es tu formulario html

<form id="test_form">
<div class="container">      
    <div id="html">
        <button data-toggle="modal" data-backdrop="false" href="#formu" class="btn btn-primary">Informations</button>
    </div>
    <div class="modal fade" id="formulaire">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">x</button>
                    <h4 class="modal-title">Your infos :</h4>
                </div>

                <div class="modal-body">
                    <form action="#">

                        <div class="form-group">
                            <label for="nom">Nom</label>
                            <input type="text" class="form-control" name ="nom" id="nom" placeholder="Votre nom">
                        </div>

                        <button type="submit" class="btn btn-default">Envoyer</button>
                    </form>

                </div>

            </div>
        </div>
    </div>
</div>
</form>

Si desea agregar más validación, también puede agregar esto

1
Shafiqul Islam 5 mar. 2017 a las 13:27

Para <input type="text" />, use el evento keyup:

var $form  = $("form");
var $input = $("#nom");

$input.on("keyup", function(evt) {
    if($input.val().length < 4)
        $form.addClass("invalid");
    else
        $form.removeClass("invalid");
})
.invalid {
    border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
  <div class="form-group">
    <label for="nom">Nom</label>
    <input type="text" class="form-control" name ="nom" id="nom" placeholder="Votre nom">
  </div>

  <button type="submit" class="btn btn-default">Envoyer</button>
</form>

Este evento se aplica a los tipos de entrada en los que el usuario realmente escribe (consulte W3 Tipos de entrada HTML).

Para las etiquetas <select>, <input type="checkbox" /> y <input type="radio" />, use .on('change'). Se aplica también para los tipos menos utilizados, como range.

0
wscourge 5 mar. 2017 a las 11:25