Question

（TLDR：查看我对底部的编辑）

我正在使用jQuery Validate，所有内容都已设置并适用于验证部分。但是，当用户没有从该组单选按钮中选择一个选项时，我有一些单选按钮，我试图让label在red中突出显示。

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

我有两个问题：

在初始页面加载时，由于用户未按下，因此无效使用我当前的代码提交，标签在初始页面加载时显示为红色。
当用户点击单选按钮时，它不会变回黑色。

我的代码：

    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，Stack Overflow和其他资源。我已经用尽了所有的选择，所以我希望有人可以提供帮助。

提前致谢！

修改

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

在rules下的highlight:我添加了这个：

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

在unhighlight:下，我添加了同样的内容，但'color : 'black'。

这是“有点”工作。我删除了validator下面的所有代码。

如果出现任何错误，它基本上会转为red，并且它还会让我点击页面，然后才会转到red。如果我摆脱了错误，它会立即回到black。

我不完全确定如何定位特定的RadioButton验证rule，并且只根据验证是否已经验证black或red 。我也不确定为什么在触发Selection文本转为red之前让我点击页面，但在验证完成后立即转为black。

我试过这个：

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

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

Answer 1

第一期：

使用一个跟踪用户是否与表单交互的变量（脏），我更喜欢点击

第二期：

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

单击按钮后，评估表单。

选择后，由于ID在html5中应该是唯一的，您可以这样做：

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

Answer 2

我通过将其添加到highlight和unhighlight字段来解决此问题：

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

然后：

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

我认为这是最简单的方法...验证插件将错误类添加到元素中，所以为什么不只是搜索元素，抓住class，并比较它是否等于你想要的等于。然后，在这种情况下，将元素标签的颜色更改为black。

使用jQuery验证并尝试在无效时突出显示标签

2 个答案: