使用不同输入表单（input和textarea）时的JQuery验证程序问题

如果能在JQuery中提供表单验证方面的帮助，我将不胜感激。我是个笨蛋，所以如果事情真的很简单，请提前道歉

基本上，我想验证问卷上的表格。表单中有两种类型的输入——一种是使用JQuery范围滑块（比例为1到5）的输入，另一种是文本区域输入框，用户可以在其中输入想法

因此验证插件工作正常，检查所有字段，然后用红色标记不完整的字段。当用户填写了所需的信息时，我的问题就出现了。我可以让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>

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

我已经徒劳地尝试了两天，但仍然无法解决这个问题，所以任何方向或简单的“这是不可能的”都将非常感激

非常感谢

而不是

onfocusout

使用

---

您的代码有问题

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

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

• 每当字段失去焦点（初始提交后）时触发，并且它仅用于触发验证。这也不是添加/删除类的适当位置

更适合切换类的选项是和

更接近这一点

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

您可以在这些函数中使用条件将某些操作限制为某些元素

---

问题：

• 您没有任何
  标记。如果没有

  form

  标记，jQuery验证插件将无法工作

• 您已经包含了jQueryValidate插件的1.7版，它太旧了，无法使用jQueryV2

• 您没有“提交”按钮，因此无法触发表单上的验证

• 您的

  文本

  输入

  为

  只读

  ，同时也标记为

  必需

  。用户将永远无法在此处输入数据，因此无需将其设置为“必需”

• 根据我上面的回答，不正确地使用了

  errorPlacement

  和

  onfocusout

• 如果

  submitHandler

  选项仅包含默认操作，则不需要该选项。换句话说，由于默认情况下已经发生了

  form.submit（）
  

---

所以我终于找到了如何让这段代码工作的方法。事实证明，问题不在于验证程序插件，而在于RangeSloider插件。话虽如此，斯帕克，你的建议真的很有帮助，所以非常感谢你的帮助

我在下面列出了我的最终JQuery代码，包括RangeSloider和Validator，供可能有类似问题的人使用。（注意：JSFIDLE仍然不能工作）

$（文档）.ready（函数（）{
var-cellWidth=0；
var newWidth=0；
$（“.radio头”）.each（函数（）{
var newWidth=$（this.width（）；
如果（单元格宽度<新宽度）
{
cellWidth=newWidth；
}
});
$（“.radio header”）.width（cellWidth）；
$（“.num”）.滑块({
射程：“最大”，
民:1,，
最高：5，
值：0，
幻灯片：功能（事件、用户界面）{
$（this.sides（“：text”）.val（ui.value）；
$（this）.closest（'tr'）.removeClass（'error'）；
}
});
});
$（文档）.ready（函数（）{
$（'.form required'）。验证({
焦点无效：错误，
focusCleanup：没错，
errorClass:“隐藏”，
突出显示：函数（元素、错误、错误类）{
$（元素）。最近（'tr'）。addClass（'error'）；
$（'.error message'）.removeClass（'hidden'）；
},
取消高亮显示：函数（元素、错误、errorClass）{
$（元素）。最近（'tr'）。removeClass（'error'）；
},
});
$.validator.addClassRules({
滑块值：{
要求：正确，
数字：对，
},
});
});

谢谢。我已经试过了，但它似乎仍然不起作用..textarea是您正在从？

$（'.valid'）.Nestest（'tr'）.removeClass（'error'）中删除
.error
类的唯一元素这确实有帮助，但这是另一个问题-所有文本区域都进行验证，但只有我单击的第一个输入有效，之后，其他输入的验证都无效。我想知道是否有可能与引导或范围滑块插件冲突。如果没有看到可测试的实际代码示例（即不只是代码片段），这个问题将很难回答。特别是如果你认为与你的资源有冲突。改进您问题中的可用代码和演示将有所帮助。如果您的JSFIDLE不是为了向我们展示任何东西而构建的，那么它是没有用的
errorPlacement: function (error, element) {
    $('.error-message').removeClass('hidden'); 
    $(element).closest('tr').addClass('error');
},
onfocusout: function (error, element) {
    $('textarea.valid').closest('tr').removeClass('error');
},

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

                $(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,
                    },
                });
            });