1

jQuery Validate Pluginを使用して、Web サイトのフォームを検証しています。minlengthフィールドにまだ必要な文字数を表示するようにデフォルトのメッセージを変更し、ユーザーがinputフィールドに入力するとこの数が変化するようにしたいと思います。

たとえば、minlengthルールが 15 文字で、フィールドに 2 文字ある場合、エラー メッセージは次のようになります。"Please enter at least 13 more characters."

簡単にするために、ここに私の jQuery を示します。以下のコードはすべて、まとめると期待どおりに機能しないため、機能するソリューションが必要です

これがフィドルです：http://jsfiddle.net/ac2T2/1/

これが私のコードです：

$('#contactForm').validate({
    rules: {
        contactName: {
            minlength: 15
        }
    }
});

次のようなコードを追加したいと思います。

var numOfCharactersToGo = 15 - parseInt($('contactName').val().length);

理論的には、次のようにデフォルトの jQuery メッセージを変更できますminlength。

jQuery.extend(jQuery.validator.messages, {
    minlength: jQuery.validator.format('Please enter at least ' + numOfCharactersToGo + ' more characters.')
});
4

2 に答える 2

2

@Sparkyの回答が正しい方向に導いてくれたおかげで、他の誰かが同じ機能を望んでいる場合の最終的な回答は次のとおりです。

これがフィドルです：http://jsfiddle.net/ZhRGA/8/

HTML

<form id="myform">
    <input type="text" name="field1" id="field1" />
    <br/>
    <input type="submit" />
</form>

jQuery

$(document).ready(function () {
var minChar = 15;
    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true,
                minlength: minChar
            }
        },
        messages: {
            field1: {
                minlength: function () {
                    return [
                        (minChar - parseInt($('#field1').val().length)) +
                        ' more characters to go.'];

                }
            }
        }
    });
});
于 2013-03-08T21:55:46.840 に答える
1

プラグインがフォーム上で初期化された後、動的に変更することはできません。そのような変更には組み込みメソッドを使用しなければなりrulesません。messages

初期化後にルールとメッセージを動的にオーバーライドできる場所について、私が知っている方法は 1 つだけです。それはrules('add')メソッドです。

$('#field').on('keyup', function () {  
    current = 15 - parseInt($(this).val().length);
    $(this).rules('add', {
        minlength: 15,
        messages: {
            minlength: current + " characters to go"
        }
    });
});

keyupイベント ハンドラー関数内、または文字を動的にカウントするために使用している関数内で上記を呼び出す必要があります。デモは粗雑で、克服すべき問題がいくつかありますが、それが可能であることを示しています。

非常に粗いデモ: http://jsfiddle.net/ZhRGA/5/

于 2013-03-08T20:02:02.063 に答える