0

テキストが CMS から来ているスパンからカスタム エラー メッセージ テキストをコピーする必要があります。基本的には、ローカライズされたカスタム エラー メッセージを表示する必要があります。

フォームを送信するとコードが機能しますが、外側をクリックするとすぐに、デフォルトのメッセージがカスタム メッセージに置き換わります。

http://jsfiddle.net/2nV5u/16/

HTML

<form name="form-core" id="form-core" method="post" action="" role="search"  novalidate="novalidate">
      <label for="keywords">Hello</label>
      <input type="text" id="keyword" name="keyword" class="required" />
      <span class="error-message-required">Ce champ est obligatoire</span>
      <input type="submit" /><input class="cancel" type="submit" value="Reset" />         
</form>

JS

 $('#form-core').validate({
            debug: false,
            onfocusout: function (element) { jQuery(element).valid() },
            errorElement: "div",
            errorPlacement: function (error, element) {
                jQuery('div[for=' + error.attr('for') + ']').remove();
                    error.text($(element).next('.error-message-required').text());
                    error.insertBefore(element);
                }                
        });
4

1 に答える 1

8

errorPlacementコールバック関数はすべてのエラーで起動されるわけではないため、期待どおりに動作していません。エラーが最初に発生したときにのみ発生し、プラグインはそれ自体で作成した新しいエラー要素を自動的に表示/非表示にします。

1) 必要以上に物事を複雑にしていると思います。.validate()初期化関数内でカスタム エラー メッセージを指定するだけです。<span></span>HTML/CMS から を削除し、プラグインが設計どおりにこれを処理できるようにします。

messages: {
    keyword: {
        required: "Ce champ est obligatoire"
    }
}

2) 繰り返しますが、プラグインにその仕事をさせます。errorPlacementコールバック関数を次のように変更します。

errorPlacement: function (error, element) {
    error.insertBefore(element);
}

3)type="reset"フォームを送信しないように、 リセット ボタンを に変更します。

<input class="cancel" type="reset" value="Reset" />

動作デモ: http://jsfiddle.net/wQaYw/

jQuery :

$(document).ready(function () {

    $('#form-core').validate({
        messages: {
            keyword: {
                required: "Ce champ est obligatoire"
            }
        },
        onfocusout: function (element) {
            jQuery(element).valid()
        },
        errorElement: "div",
        errorPlacement: function (error, element) {
            error.insertBefore(element);
        }
    });

});

編集：

何らかの理由で をspanCMS から削除して、 内でカスタム メッセージを宣言できない.validate()場合は、別のオプションがあります。

ビルトインrules('add')メソッドを使用して、次のように、フォーム全体でルールinput[type="text"]を使用してすべてのデフォルト メッセージを動的に変更します。required(ただし、このメソッドでは、すべての要素が上書きされるため、これらの要素ごとにカスタム メッセージを指定する必要があります。)

$('#form-core input[type="text"]').each(function () {
    $(this).rules('add', {
        messages: {
            required: $(this).next('.error-message-required').text()
        }
    });
});

この後...

$('#form-core').validate({
    onfocusout: function (element) {
        jQuery(element).valid()
    },
    errorElement: "div",
    errorPlacement: function (error, element) {
        error.insertBefore(element);
    }
});

動作デモ: http://jsfiddle.net/6Vzdz/

于 2013-04-11T14:28:39.343 に答える