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

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

编辑2在提出许多澄清建议和示例代码之后，我发布此链接http://jsfiddle.net/Ye3Ls/20/如果您在字段中键入直到收到成功消息，然后继续键入，您就会看到问题所在。我正在使用验证插件here感谢所有的患者，因为我正在思考如何让它发挥作用。我想我可能需要使用类似 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] 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());
}