2

在对这个问题进行了广泛的搜索之后，我无法自己找到一个问题的答案，因为我遇到的问题是 jQuery 验证插件正在蚕食我用于 SMS-via-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();
});

我什至尝试重新触发 counter 函数，作为对验证的回调，但这只会导致重复的、非功能性的计数器被放置在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 项目——它是为我的未婚妻和我的婚礼网站准备的，所以我试着把它分类一下。如果有任何方法可以让计数器和验证很好地结合在一起，那就太好了。如果不是，这并不是世界末日，但它仍然不够理想。

4

1 回答 1

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/

于 2012-10-12T20:56:09.407 回答