javascript - 使用 jQuery Validate 并尝试在标签无效时突出显示标签

Question

(TLDR:请参阅底部的我的编辑)

我正在使用 jQuery Validate，一切都已设置完毕并可用于验证部分。但是，我有一些单选按钮，当用户未从该组单选按钮中选择选项时，我试图将其 label 以红色突出显示。

验证适用于单选按钮，但是我无法使标签突出显示正常工作。

我有两个问题:

1. 在初始页面加载时，它是无效的，因为用户尚未推送尚未提交，因此使用我当前的代码，标签在初始页面加载时显示为红色。

2. 当用户单击单选按钮时，它不会变回黑色。

我的代码:

    var rules = {
        rules: {
            RadioButton: { required: true },                
        },
        messages: {
            RadioButton: { required: "Please select an option" },                
        },
        highlight: function (input) {
            $(input).addClass("error");
        },
        unhighlight: function (input) {
            $(input).removeClass("error");
        },
        errorLabelContainer: "#errMessage",
        errorClass: "invalid-inputs",
        errorPlacement: function (error, element) {
            error.attr("id", "errMessage");
        }
    };

    $('#form').validate(rules);

下面的代码是我所做的关于突出显示或取消突出显示该标签的代码:

 var validator = $('#form').validate().check('#RadioButton');
            if (!validator) {               
    $('#form').find('div[id="label"]').addClass().css({ 'color': 'red' });
        }

    if (validator) {  
$('#form').find('div[id="label"]').addClass().css({ 'color': 'black' });
    }

通过上面的代码，我知道 var validator 正在工作，因为当我粘贴时它在正确的情况下返回 true 或 false开发工具中的代码。

HTML:

 <div class="label" id="label">Selection</div>

我正在尝试让Selection突出显示。

这段代码给了我最接近我想要实现的结果，但它仍然不起作用。我尝试搜索 jQuery Docs 、堆栈溢出和其他资源。我已经用尽了所有的选择，所以我希望这里有人可以提供帮助。

提前致谢!

编辑:

我已经取得了一些进展...

在 highlight: 下的 rules 中，我添加了以下内容:

$('#form').find('div[id="label"]').addClass().css({ 'color': 'red' });

在unhighlight:下我添加了相同的内容，但是使用了'color : 'black'。

这“有点”有效。我删除了验证器下面的所有代码。

如果出现任何错误，它基本上会变成红色，并且它还会让我在页面变成红色之前点击该页面。如果我消除错误，它会立即变回黑色。

我不完全确定如何定位特定的 RadioButton 验证规则，并且仅将其变为黑色或红色 基于是否已验证。我也不知道为什么它让我在触发 Selection 文本变成 红色 之前点击页面，但它却变成黑色在验证某些内容后立即进行。

我试过这个:

if($('#RadioButton').valid() == false){ //Do the color change }

如果它是true，则相反，但这似乎只会使页面崩溃。

Answer 1

第一期:

使用一个变量来跟踪用户是否与表单交互(脏)，我更喜欢在单击时执行此操作

第二期:

$('#RadioButton').click(function() { } )

单击按钮后评估表单。

通过选择，由于 ID 在 html5 中应该是唯一的，您可以简单地执行以下操作:

$('#label').addClass('highlighted')