Question

If you look here: http://creathive.net you will see I have an application form down at the bottom of the page and I have added some jQuery validation to make a user fills it out correctly. However what I would like to do is instead of showing all those labels next to the input boxes (which breaks the layout) is just keep it simple and only change the colours of the input fields.

edit:

$("#applicationform").validate({
    rules: {
        firstname: "required",
        lastname: "required",
        email: {
            required: true,
            email: true
        },
        url: {
            required: true,
            url: true
        }
    }
});

Answer 1

var val = $("#someform").validate();
val.hideErrors();

Will keep the highlighting but remove the labels.

Edit: try overriding the errorPlacement in your validate (add the option)….

errorPlacement: function(error, element) {
    error.insertAfter(element);
    error.css("display", "none");
}

Edit: try removing all elements with class error after validate()…

 $('.error').remove()

Edit:

$("#applicationform").validate({
                    rules: {
                        firstname: "required",
                        lastname: "required",
                        email: {
                          required: true,
                          email: true
                        },
                        url: {
                          required: true,
                          url: true
                        }
                    },
                    errorPlacement: function(error, element) {
                          element.before(error);
                          error.css('display','none');
                    },
                    invalidHandler: function(form,validator){
                         $('.error').remove();
                    }


 });