javascript - JQuery:如何在填写表单时实时显示错误？

Question

我想对用户输入进行“实时”验证。例如，直到用户在输入中没有写下至少 4 个字符，表格必须用红色圈起来。

现在这是我的代码，其中红色仅在用户提交表单后出现:

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

我已经在 Google 上查过，有一个名为 Formvalidation 的库，但它是付费的，我希望能够在没有 jQuery 之外的任何额外库的情况下实现这种效果。

Answer 1

请检查这段代码

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

这是你的 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>

如果你想添加更多验证那么你也可以添加这个