Question

I have a webpage developed in ASP.NET MVC 3 and I am using jQuery validator to validate my fields.

  $.validator.setDefaults({
    errorContainer: "#validationSummary, #validationNotice",
    highlight: function (element, errorClass) {
        $(element).css("border", "1px dotted red");
    },
    unhighlight: function (element, errorClass) {
        $(element).css("border", "1px solid black");
    }
});

This will give my fields a “red dotted border” when they aren’t valid.

I have a text that i want to show IF all fields are valid in my page .

        <div class="ReadyToSend" style="margin-top:50px;">
                   All fields are valid.
        </div>

So I want to hide “ReadyToSend” if my page isn’t valid and show it if ALL of my fields on the page is valid.

Answer 1

try this

$.validator.setDefaults({
    errorContainer: "#validationSummary, #validationNotice",
    highlight: function (element, errorClass) {
        $(element).css("border", "1px dotted red");
        $(".ReadyToSend").hide();
    },
    unhighlight: function (element, errorClass) {
        $(element).css("border", "1px solid black");
        if($("#yourFormName").validate().checkForm()) {
            $(".ReadyToSend").show();
        }
    }
});

make sure you add display: none on your ReadyToSend div