Success message with style, jquery validation

Question

I'm using jquery.validation following is the code. I've achieved to show a styled error message by attaching class and giving class some css.

$("#sign-up").validate({
    rules: {
        FullName: {
            required: true
        },
        Username: {
            required: true
        },
        Email: {
            required: true,
            email: true
        }
    },
    messages: {
        FullName: "Please enter your full name",
        Username: "Please enter handle name",
        Email: {
            required: "Please enter an email address",
            email: "Please enter a valid email address"
        }
    },
    errorElement: "span",
    wrapper: "div",
    errorPlacement: function (error, element) {
        error.insertBefore(element);
        error.addClass("error-validation");
    }
});

But I also want to display a nice looking success message, like error message, styled. Once the validation passes, the message should show.

How can I do this?

Answer 1

It's in the documentation

success: function(label) {
  $("#success").show();
},

You will need to hide the success before the validation if you do not clear the page