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();
});

検証へのコールバックとして、カウンター関数を再起動しようとしましたが、その結果、重複した機能しないカウンターがの横に配置されました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

問題は、カウンタープラグインがカウンターの場所を追跡するのにあまり賢くないということです。テキスト領域の後に置くことでカウンターを作成します。検証プラグインは、エラーメッセージに対して同じことを行います。最も簡単な修正は、検証プラグインにエラーを別の場所に置くように指示することです。これを試して：

$('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 に答える