JQuery 使用不同输入形式（输入和文本区域）时的验证器问题

Question

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

基本上，我想验证问卷上的表格。表单中有两种类型的输入 - 使用 JQuery 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

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

我已经试了 2 天了，没能解决这个问题，所以任何方向或简单的 'this is impossible' 将不胜感激。

非常感谢

Answer 1

而不是

onfocusout

使用

onblur

http://www.w3schools.com/jsref/event_onblur.asp

Answer 2

你的代码有问题...

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 每当字段失去焦点时（在初始提交后）触发，它仅用于触发验证。这也不是 adding/removing 类.

用于切换类的正确选项是 highlight and 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 验证插件将无法工作。
您包含了 jQuery 验证插件的 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.

Answer 3

所以我终于想出了如何使这段代码工作。事实证明问题不在于 Validator 插件，而在于 rangeSlider 插件。话虽如此，Sparky，你的建议确实很有帮助，非常感谢你的帮助。

我在下面列出了我的最终 JQuery 代码，包括 rangeSlider 和 Validator，以供可能遇到类似问题的任何人使用。（注意：JSFiddle 仍然不起作用）。

                $(document).ready(function() {
                var cellWidth = 0;
                var newWidth = 0;
                $(".radio-header").each(function() {
                    var newWidth = $(this).width();
                    if (cellWidth < newWidth )
                    {
                        cellWidth = newWidth;
                    }
                });
                $(".radio-header").width(cellWidth);

                $( ".num" ).slider({
                    range: "max",
                    min: 1,
                    max: 5,
                    value: 0,
                    slide: function( event, ui ) {
                        $(this).siblings(":text").val( ui.value );
                        $(this).closest('tr').removeClass('error');
                    }
                });
            });

            $(document).ready(function () {
                $('.form-required').validate({
                    focusInvalid: false,
                    focusCleanup: true,
                    errorClass: "hidden",
                    highlight: function(element, error, errorClass) {
                        $(element).closest('tr').addClass('error');
                        $('.error-message').removeClass('hidden');
                    },
                    unhighlight: function(element, error, errorClass) {
                        $(element).closest('tr').removeClass('error');
                    },
                });
                $.validator.addClassRules({
                    sliderValue: {
                        required: true,
                        digits: true,
                    },
                });
            });

JQuery 使用不同输入形式（输入和文本区域）时的验证器问题

JQuery Validator problems when using different input forms (input and textarea)

forms

jquery

jquery-validate