jQuery表单验证，显示成功消息

Question

The following jQuery is working very well, now I am trying to show a success message, but I can't get it to work. This is my attempt.

            jQuery("#name").validate({
                expression: "if (VAL.length > 5 && VAL)  return true; else return false;",
                message: "Please enter more than 5 characters",
                success: function() {
                $(this).toggleClass("ok");
                }
            });

I would like to show a div with the class 'ok'.

This is the div

<div class="ok"> OK! </div>

and this is the css

.ok { display: none; color: green; }

Answer 1

.ok { color: green; }

Remove display:none from your css, (move it to the DIV's style attribute so you can toggle it with jQuery)

<div id="successMessage" style="display:none;" > OK! </div>

Then make your success method:

success: function() {
     $('#successMessage').show();
}

I don't know the validate() method well, so I'm not sure what $(this) refers to inside of the success method, so I used an ID selector. See the documentation for show .

Answer 2

if i understand correctly, you are very close!

just give your div an id:

<div id="successMessage" class="ok"> OK! </div>

then in your validate instead of using this, select your div by id:

$("#successMessage").show();