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

Question

昨天我发布了this 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 或 foucus 上），它都会重新生成一条成功消息。我想既然我添加了“有效”类，一个合乎逻辑的步骤是检查标签是否具有“有效”类，因此不要添加消息，因为它已经有一个。然而，这不起作用。任何其他想法都会很棒。

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

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

Answer 1

successMessage 不需要 label 作为参数。

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。因此，您无需向label 添加任何文本。它将保持不变。

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

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

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

[编辑 1A] Here it is

问题是标签被创建了不止一次。这个插件在我看来不是那么好用。

我不得不更改错误位置和成功逻辑。

    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(!$(label).hasClass("valid")){