Javascript JQuery：填写表单时如何实时显示错误？

我想对用户输入进行实时验证。例如，在用户没有在输入中写入至少4个字符之前，表单必须用红色包围

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

$function{ $form.onsubmit，函数{ 如果$input.val.length<4{ $div.modal-dialog.addClasshas-error； $div.alert.showslow.delay4000.hideslow； 返回false； } }; }; 信息 x 您的信息： 笔名 特使 对于，使用keyup事件：

var$form=$form； var$input=$nom； $input.onkeyup，函数EVT{ 如果$input.val.length<4 $form.addClassinvalid； 其他的 $form.removeClassinvalid； } .无效{ 边框：2倍纯红； } 笔名 特使 请检查这个代码

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

---

如果您想添加更多验证，那么您也可以添加此项

您想添加哪种类型的验证？谢谢，但是在提交表单时，不会出现弹出窗口为什么要添加额外的警告消息？谢谢，但是您将无效部分放在何处？在.css文件中？是的，或者在文档中的标记中。什么最适合你。我的想法是将HTML、JS和CSS分开，我就是这么做的。