jquery 验证插件。生成随机成功消息一次

Question

昨天我发布了这个问题，该问题已得到解答，但它导致了另一个问题。

我使用 jquery 验证插件有以下代码：

       //array of success messages and randomly select one 
   var messages = ["Good!", "Great!", "Awesome!", "Super!", "Nice!","Yay!", "Success!", "Ok!", "Perfect!","Sweet!" ];
function successMessage(label) {
return messages[Math.floor(Math.random() * messages.length)];
}

然后我的验证代码成功

...success: function(label) {
                if(!$(label).hasClass("valid")){
          label.addClass("valid").text(successMessage());
            }
       }...

发生的情况是，每次表单有效（在 keyup 或 focus 上）时，它都会重新生成一条成功消息。我想，既然我添加了“有效”类，一个逻辑步骤就是检查标签是否具有“有效”类，因此不要添加消息，因为它已经有一个消息。然而这不起作用。任何其他想法都会很棒。

编辑：经过进一步的研究和思考。我很确定问题是每次验证表单时（在 keyup、提交等）时都会删除并添加“valid”类，我认为最简单的事情可能是选择标签的值并查看结果是否与数组匹配，如果是，则不执行任何其他操作，添加成功消息。我可能是错的。我也不认为我第一次就很好地阐明了这个问题。在用户打字时更改验证消息看起来很愚蠢。

编辑2在提出许多澄清建议和示例代码之后，我发布此链接http： //jsfiddle.net/Ye3Ls/20/ 如果您在字段中键入，直到收到成功消息，然后继续键入，您就会看到问题所在。我正在使用此处找到的验证插件感谢所有患者我整理了如何让它发挥作用。我想我可能需要使用像 in_array 或 has_value() 这样的东西

Answer 1

不需要 label 作为 successMessage 的参数。

function successMessage() {
    return messages[Math.floor(Math.random() * messages.length)];
}

我相信如果 label 已经是一个 jQuery 对象，执行此操作： $(label) 将创建一个附加到 jQuery 的新标签 jQuery 对象。试试这个：

if(!label.hasClass("valid")){
    label.addClass("valid").text(successMessage());
}

或者

if(label.not(".valid")){
    label.addClass("valid").text(successMessage());
}

甚至更好：

label.not(".valid").addClass("valid").text(successMessage());

[编辑]在评论中提出问题后

if(label.text() === ''){
    label.not(".valid").addClass("valid").text(successMessage());
}
else {
    label.addClass("valid");
}

我假设您需要将valid类添加到label。如果不这样做，请删除 else 语句。

我还假设文本出现在 label 中的唯一方法是通过 successMessage。因此，您不需要向标签添加任何文本。它将保持不变。

附带说明一下，如果插件正在更改 HTML 元素的类，那么这将是代码的严重副作用，我个人不会容忍这种情况。

现在可能发生的更合乎逻辑的事情是您在提交后重新加载内容。如果这是真的，那么您在提交之前对 DOM 所做的所有 jQuery 操作都将丢失，因为新内容将被重新加载。

在将来添加实际插件的链接和更完整的代码来使用将非常重要。 @Nick Craver 使用 jsfiddle.net，我使用 jsbin.com 发布示例代码。这可以是我们所有部分更加协作的努力，以便能够重现和解决问题。

[编辑1A]
这里

问题是标签被创建了多次。我认为这个插件不太好用。

我必须改变错误位置和成功逻辑。

    errorPlacement: function(label, element) {
    // position error label after generated textarea
    var name = element.attr('name');
    if ($('#' + name + '_label').length === 0) {

        label.attr('id', name + '_label');

        label.insertAfter(element);

        if (element.is("textarea")) {
            label.css({'padding-left': '105px'})
        }
    }
},

success: function(label) {
    var name = label.attr('for');
    $('#' + name + '_label').not('.valid').removeClass('error').addClass('valid').text(successMessage());
}

Answer 2

看起来你的意思是：

$(label).addClass("valid").text(successMessage());

而不是：

label.addClass("valid").text(successMessage());

Answer 3

如果 label 是一个变量，并且 label.addClass("valid") 工作正常，为什么不使用

if(!((label).hasClass("valid"))){

而 不是进行验证
if(!$(标签).hasClass("有效")){