JQuery 验证事件设置

Question

如何设置验证器，以便每当更改此表单上的任何输入值时它都会检查表单上的所有字段。我试过了

$("#form-user-edit").validate({
        keypress : true
    });

但它不起作用。

我做了一个jsFiddle http://jsfiddle.net/NickBunich/pDrTF/1/

问题是，当您在第一个输入中输入某些内容时 - 其他输入将被启用，但如果您然后在第二个输入中输入某些内容，然后删除它，然后删除第一个输入中的文本 - 错误消息和突出显示将保留。

Answer 1

以下答案演示了插件的内置回调事件函数的正确用法。创建外部回调函数是多余且不必要的。

---

您的代码...

$("#form-user-edit").validate({
    keypress : true
});

你不能简单地“化妆”或“发明”

.validate()

选项。

keypress:

不存在。请参阅此页面了解仅可用选项。

如何设置我的验证器，以便它检查表单上的所有字段 每当更改此表单上任何输入的值时。

已经有一个名为

onkeyup

的选项，并且默认情况下处于打开状态。 （这仅检查每个按键事件的活动输入。）

您可以修改

onkeyup

以满足您的需求。这将在每个按键事件上检查整个表单。

$(document).ready(function() {
    $("#form-user-edit").validate({
        // other rules and options,
        onkeyup: function (element, event) {
            if (event.which === 9 && this.elementValue(element) === '') {
                return;
            } else if (element.name in this.submitted || element === this.lastActive) {
                if($("#form-user-edit").valid()) {
                    $("#form-user-edit .error").removeClass('error');
                };
            }
        }
    });
});

工作演示：http://jsfiddle.net/CMT5r/

工作演示包含修改为按要求运行的 OP 代码。

Answer 2

举个例子，你必须：

• 指定检查规则

   $("#form-user-edit").validate({
         rules: {
           name: "required",
           email: {
             required: true,
             email: true
           }
         },
         messages: {
           name: "Please specify your name",
           email: {
             required: "We need your email address to contact you",
             email: "Your email address must be in the format of [email protected]"
           }
         }
      })
  

本教程将为您提供有关验证的大量解释请参阅此处

Answer 3

您可以添加一个

change

事件处理程序来执行此操作

$("#form-user-edit").on('change', ':input', function(){
    if($("#form-user-edit").valid()) {
        $("#form-user-edit .error").removeClass('error')
    }
})

演示：Fiddler

Answer 4

    <!---------------------- Personal Details -------------------------->

        <div class="inputchanges">
            <form>
                <fieldset id="personalDetailsForm">
                    <div class="border rounded shadow">
                        <div class="bg-primary text-white px-3 py-2 rounded-top">
                            <h3>Personal Details / ವೈಯಕ್ತಿಕ ವಿವರಗಳು</h3>
                        </div>
                        <div class="border rounded p-3">
                            <div class="form-group row">
                                <div class="col-sm-6">
                                    <label for="name" class="col-form-label">
                                        <div class="d-flex align-items-center">
                                            <div class="mr-2" style="align-self: self-start;">3.</div>
                                            <div>
                                                Candidate Full Name : <i class="invalid">*</i><br>
                                                <span class="av-font-kn">C¨sÀåyðAiÀÄ ¥ÀÆtð ºÉ¸ÀgÀÄ :</span>
                                            </div>
                                        </div>
                                    </label>
                                    <input type="text" placeholder="Candidate Name / ಅರ್ಜಿದಾರರ ಹೆಸರು" id="name"
                                        class="form-control" minlength="1" maxlength="60" pattern="[a-zA-Z\s]{1,60}"
                                        required>
                                </div>
                                <div class="col-sm-6">
                                    <label for="fname" class="col-form-label">
                                        <div class="d-flex align-items-center">
                                            <div class="mr-2" style="align-self: self-start;">4.</div>
                                            <div>
                                                Father's Name : <i class="invalid">*</i><br>
                                                <span class="av-font-kn">vÀAzÉAiÀÄ ºÉ¸ÀgÀÄ :</span>
                                            </div>
                                        </div>
                                    </label>
                                    <input type="text" placeholder="Father's Name / ತಂದೆಯ ಹೆಸರು" id="fname"
                                        class="form-control" minlength="1" maxlength="60" pattern="[a-zA-Z\s]{1,60}"
                                        required>
                                </div>
                            </div>



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




            </form>



            <!-- Button trigger modal -->
            <div class="modal-footer d-flex justify-content-between">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Edit</button>
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>

        </div>