Question

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

基本上，我想在问卷上验证表格。表单中有两种类型的输入 - 输入，使用1到5的JQuery Range Slider，以及textarea输入框，用户可以在其中输入思想。

因此验证器插件工作正常并检查所有字段，然后用红色标记不完整。当用户填写了所需的信息时，我的问题就出现了。我可以让textarea在用户开箱即用时立即验证并删除红色标签，但输入将不会验证它是否已经验证过一次并发现了一个错误。

我的一些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

我想要实现的是，如果用户提交的表单不完整，则缺少的字段将标记为红色。只要该用户然后填写剩余的字段，无论是textarea还是输入，都可以删除“错误”类，而无需单击提交按钮。这使得它在视觉上更具吸引力并且更容易理解所有字段都是完整的。

我已经徒劳地尝试了2天而且无法弄清楚这一点，所以任何方向或简单的“这是不可能的”都将非常感激。

非常感谢

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。

Answer 2

而不是

onfocusout

使用

onblur

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

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 Validator问题（输入和textarea）

3 个答案: