jQuery.validate убивает счетчик персонажа после его запуска

Question

После тщательного поиска по этому вопросу мне не удалось найти ответ самостоятельно на проблему, с которой я столкнулся, когда плагин проверки jQuery каннибализировал плагин подсчета символов, который я использую для формы SMS-через-PHP.

Если вы войдете в форму на внешнем интерфейсе и начнете печатать в текстовой области, счетчик будет работать нормально, и, конечно, проверка не сработает, поскольку в элементе есть текст... но, в интересах тестирования, если вы попытаетесь отправить форму без сообщения, проверка запускается, и сообщение об ошибке отображается относительно textareaи когда вы вводите копию, сообщение проверки исчезает, но счетчик символов больше не работает.

Вот счетчик символов, который я использую: http://cssglobe.com/jquery-plugin-simplest-twitterlike-dynamic-character-count-for-textareas/

Вот как я выложил свой сценарий:

$(function(){
    //irrelevant functions have been omitted

    $("#smsMessage").charCount({
        allowed:110,        
        warning:10, 
    });
    $('form').validate();
});

Я даже попытался повторно запустить функцию счетчика в качестве обратного вызова для проверки, но это просто привело к тому, что рядом с textarea,

$(function(){
    //irrelevant functions have been omitted

    $("#smsMessage").charCount({
        allowed:110,        
        warning:10, 
    });
    $('form').validate({
        invalidHandler: function(form, validator) {
            var errors = validator.numberOfInvalids();
            if (errors) {
                $("#smsMessage").charCount({
                    allowed:110,        
                    warning:10, 
                });
            }
        }
    });
});

По общему признанию, это мой первый сольный проект webDev за некоторое время - для моей невесты и моего свадебного сайта, поэтому я пытаюсь немного его классифицировать. Если есть какой-нибудь способ совместить счетчик и валидацию, это было бы здорово. Если нет, то это не совсем конец света, но он все еще не идеален.

Answer 1

Проблема в том, что ваш плагин счетчика не очень умен, чтобы отслеживать, где находится счетчик. Он создает счетчик, помещая его после текстовой области. Плагин validate делает то же самое с сообщениями об ошибках. Самым простым решением будет сказать плагину проверки, чтобы он помещал свои ошибки в другое место. Попробуй это:

$('form').validate({
    errorPlacement: function(error,element){
        if (element.attr('id') == 'smsMessage'){
            error.insertAfter(element.next());
        } else {
            error.insertAfter(element);
        }            
    }       
});​

Я сделал рабочий пример, чтобы вы могли попробовать его: http://jsfiddle.net/ryleyb/6HKuq/