Javascript 使用jQuery验证并尝试在标签'；这是无效的

（TLDR：请参见底部的编辑）

我正在使用jQueryValidate，一切都已设置好，正在为验证工作。但是，我有一些单选按钮，当用户未从该组单选按钮中选择选项时，我试图使其

标签

在

红色

中突出显示

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

我有两个问题：

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

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

我的代码：

    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验证器

正在工作，因为当我在开发工具中粘贴代码时，它在正确的场景中返回

true

或

false

HTML：

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

在

取消高亮显示下：

我添加了相同的内容，但是添加了

的“颜色：'黑色”

这是“一种”工作。我删除了

validator

下面的所有代码

如果有任何错误，它基本上会变成红色，这也会让我在页面变成红色之前点击它。如果我消除了一个错误，它会立即变回黑色

我不完全确定如何针对特定的

单选按钮

验证

规则

，仅根据是否已验证将其变为

黑色

或

红色

。我也不知道为什么它会让我在页面触发

选择

文本变为

红色

，但在验证某个内容后，它会立即变为

黑色

我试过这个：

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

如果

为真，则相反，但这似乎会使页面崩溃。
第一期：

使用一个变量跟踪用户是否与表单交互（dirty），我更喜欢在单击时执行

第二期：

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

单击按钮后，评估表单

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

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

第一期：

使用一个变量跟踪用户是否与表单交互（dirty），我更喜欢在单击时执行

第二期：

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

单击按钮后，评估表单

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

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

我通过将其添加到
高亮显示
和
取消高亮显示
字段来解决此问题：

if ($("#RadioButton").attr("class") === "error") {
        return $('#label').css({ 'color': 'red' });
   }

然后：

if ($("#RadioButton").attr("class") !== "error") {
        return $('#label').css({ 'color': 'black' });
   }

我想这是最简单的方法。。。validate插件将错误类添加到元素中，那么为什么不搜索元素，抓取
类
，然后比较它是否等于您希望它等于的值。然后，在这种情况下，将元素标签的颜色更改为
黑色
我通过将其添加到
高亮显示
和
取消高亮显示
字段解决了这个问题：

if ($("#RadioButton").attr("class") === "error") {
        return $('#label').css({ 'color': 'red' });
   }

然后：

if ($("#RadioButton").attr("class") !== "error") {
        return $('#label').css({ 'color': 'black' });
   }

我想这是最简单的方法。。。validate插件将错误类添加到元素中，那么为什么不搜索元素，抓取
类
，然后比较它是否等于您希望它等于的值。然后，在这种情况下，将元素标签的颜色更改为
黑色