validate custom method and class demo

http://stackoverflow.com/questions/18981489/jquery-validator-addclassrules-doesnt-show-error-message-why

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form id="test-form">
    <input type="file" id="files" name="name" class="nameExistErrClass" />
    <input type="submit">
    <div id="errors"></div>
</form>

CSS

.error {
    color: red;
}

JavaScript

jQuery.validator.addMethod("dimention", function (value, element, param) {
var width = $(element).data('imageWidth');
var height = $(element).data('imageHeight');
if(width == param[0] && height == param[1]){
return true;
}else{
return false;
}
}, 'your custom message here');

jQuery.validator.addClassRules("nameExistErrClass", {
    dimention:[1280, 1024]
});
$('#files').change(function() {
            $('#files').removeData('imageWidth');
            $('#files').removeData('imageHeight');
            var file = this.files[0];
            var tmpImg = new Image();
            tmpImg.src=window.URL.createObjectURL( file ); 
            tmpImg.onload = function() {
                width = tmpImg.naturalWidth,
                height = tmpImg.naturalHeight;
                $('#files').data('imageWidth', width);
                $('#files').data('imageHeight', height);
            }
        });

$('#test-form').validate({
    errorLabelContainer: '#errors',
    wrapper: 'li',
    submitHandler: function () {
        alert("successful submit");
        return false;
    }
});