JQuery: how to show error live when filling a form?

Question

I would like to make verification of a user input "live". For instance, until the user did not write at least 4 characters in the input, the form must be encircled with red.

For now here is my code, where the red color only appears after the user submit the form:

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

I already checked on Google and there is a library called Formvalidation but it's paying, I would like to be able to do this effect without any extra library other than jQuery.

Answer 1

please check this code

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

and this your html form

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

if you want to add more validation then you can also add this

Answer 2

For <input type="text" />, use keyup event:

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>

This event applies for the input types in which user actually types (see W3 HTML input types).

For <select>, <input type="checkbox" /> and <input type="radio" /> tags, use .on('change'). It applies also for less used types, like range.