使用不同输入表单(输入和文本区域)时的 JQuery Validator 问题

Question

我非常感谢有关 JQuery 表单验证的一些帮助。我是菜鸟，所以如果这真的很简单，请提前道歉。

基本上，我想验证调查问卷上的表格。表单中有两种类型的输入:一种是使用 JQuery Range Slider(范围为 1 到 5)的输入，另一种是文本区域输入框，用户可以在其中输入想法。

因此验证器插件工作正常并检查所有字段，然后将不完整的字段标记为红色。当用户填写了所需的信息时，我的问题就出现了。一旦用户将焦点移出框，我就可以让文本区域进行验证并删除红色标签，但如果输入已经验证过一次，则输入将不会验证并发现一个错误。

我的一些 HTML 表单:

<tr>
    <td>Rate how confident you feel about your knowledge on the subject</td>
    <td class="slider-holder">
        <div class="slider num"></div>
        <input class="sliderValue validateFormClass" type="text" readonly="true" name="fb_33" required />
    </td>
</tr>
<tr>
    <td>List three important concepts or ideas that you learned in this course</td>
    <td class="slider-holder">
        <textarea name="fb_34" class="textAreaFBSurvey validateFormClass" required></textarea>
    </td>
</tr>

我的 JQuery 验证代码:

$(document).ready(function () {
    $('.form-required').validate({
        onclick: false,
        focusInvalid: false,
        focusCleanup: true,
        errorPlacement: function (error, element) {
            $('.error-message').removeClass('hidden');
           $(element).closest('tr').addClass('error');
        },
        onfocusout: function (error, element) {
            $('textarea.valid').closest('tr').removeClass('error');
        },
        submitHandler:function (form) {
            form.submit();
        },
    });
});

<强> Fiddle Demo

我想要实现的是，如果用户提交不完整的表单，缺失的字段将被标记为红色。一旦该用户填写了剩余字段(无论是文本区域还是输入)，“错误”类就会被删除，而无需单击提交按钮。这只会使其在视觉上更具吸引力，并且更容易理解所有字段都是完整的。

我已经徒劳地尝试了两天，但无法弄清楚这一点，因此任何方向或简单的“这是不可能的”将不胜感激。

非常感谢

Answer 1

你的代码有问题...

errorPlacement: function (error, element) {
    $('.error-message').removeClass('hidden'); 
    $(element).closest('tr').addClass('error');
},
onfocusout: function (error, element) {
    $('textarea.valid').closest('tr').removeClass('error');
},

• errorPlacement 发生错误时触发，它仅用于错误消息的放置，而不用于切换类。

• onfocusout 每当字段失去焦点(在初始提交之后)时就会触发，并且它仅用于触发验证。这也不是添加/删除类的正确位置。

用于切换类的更正确选项是 highlight 和 unhighlight .

与此更接近的东西。

highlight: function(element, errorClass, validClass) {
    $(element).closest('tr').addClass(errorClass);
},
unhighlight: function(element, errorClass, validClass) {
    $(element).closest('tr').removeClass(errorClass);
},

您可以在这些函数中使用条件来限制对某些元素的某些操作。

<小时/>

your jsFiddle demo 出现问题:

• 您没有 <form></form>标签。如果没有form，jQuery Validate 插件将无法工作标签。

• 您已经包含了 jQuery Validate 插件的 1.7 版，该插件太旧了，无法与 jQuery v2 一起使用。 The latest version of this plugin is 1.13.1 .

• 您没有提交按钮，因此没有任何内容可以触发表单验证。

• 您的text input是 readonly同时它也被标记为 required 。用户永远无法在此处输入数据，因此无需输入 required .

• errorPlacement 的使用不当和onfocusout按照我上面的回答。

• 您不需要 submitHandler当它只包含默认操作时的选项。换句话说，从form.submit()开始默认情况下已经发生的情况，只需省略 submitHandler .