jquery Validate Plugin. Generate random success message, once.

Question

Yesterday I posted this question which is answered but it lead to another problem.

I have the following code using jquery validation plugin:

       //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)];
}

Then my validation code success

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

What is happening is that each time the form is being valid (on keyup or foucus) it regenerates a success message. I figured since i was adding the class "valid" a logical step would be to check if the label has the "valid" class and is so don't add a message because it already has one. This however isn't working. Any other ideas would be great.

Edit: So after further research and thinking. I'm pretty sure the problem is that the class of "valid" is being removed and added each time time form is validated (on keyup, submit, etc) I think the easiest thing to do may be to select the value of the label and look to see if the result matches the array, if so then don't do anything else add a success message. I could be wrong. I also don't think I articulated the question the best the first time. It just looks silly to have the validation message change while the user is typing.

EDIT 2 After the many suggestions for clarification and example code I am posting this link http://jsfiddle.net/Ye3Ls/20/ if you type into a field until you get a success message then keep typing you'll see what the problem is. I'm using the validation plugin found here Thanks for all your patients as I sort though how to get this to work. I think i may need to use something like in_array or has_value()

Answer 1

It looks like you mean to say:

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

rather than:

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

Answer 2

If label is a variable, and label.addClass("valid") works fine, why don't you verify using:

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

instead of if(!$(label).hasClass("valid")){

Answer 3

Don't need label as a parameter for successMessage.

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

I believe that if label is already a jQuery object doing this: $(label) will create a new label jQuery object attached to jQuery. Try this:

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

Or

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

Or even better:

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

[EDIT] after question asked in comment

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

I'm assuming that you need to add the valid class to label. If you don't then remove the else statement.

I'm also assuming that the only way for text to be in label is through successMessage. Therefore, you will not need to add any text to label. It will stay the same.

On a side note, if the plug-in is changing the classes of your HTML elements then that is a serious side-effect of the code and I personally wouldn't put up with that.

Now the more logical thing that is probably happening is that you are reloading your content after doing your submission. If that is true then all the jQuery manipulations to the DOM you did before submission will be lost, because of new content be reloaded.

It would be really important in the future to add a link to the actual plug-in and more complete code to work with. @Nick Craver uses jsfiddle.net and I use jsbin.com to post sample code. This can be a more collaborative effort on all our parts to be able to reproduce and solve the problem.

[EDIT 1A] Here it is

The problem is that the label is being created more than once. This plug-in in my opinion is not so easy to work with.

I had to change the error placement and success logic.

    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());
}