1

次の JavaScript 関数があります。

$('div.nextStepBilling').click(function (e) {
    if ($(this).parent().parent().attr("id") == "newCardDiv") {
        $('form#myForm').validate({
            rules: {
                cardHolder: "required",
                cardNumber: {
                    required: true,
                    minlength: 15,
                    maxlength: 16
                },
                CVV: {
                    required: true,
                    minlength: 3,
                    maxlength: 4
                }
            },
            messages: {
                cardHolder: "Card holder name is required",
                cardNumber: {
                    required: "Credit card number is required",
                    minlength: "Credit card must be at least 15 digits long",
                    maxlength: "Credit card must be at most 16 digits long"
                },
                CVV: {
                    required: "CVV (security code) is required",
                    minlength: "CVV must be at least 3 digits long",
                    maxlength: "CVV must be at most 4 digits long"
                }
            }
        });
        if ($('form#myForm').valid()) {
            alert("valid");
        } else {
            alert("invalid");
        }
    }
});

適切なものをクリックするとdiv.nextStepBilling、それらの入力に何もない場合でも、常に有効なアラートが表示されます。

コンソールにエラーは表示されず$('form#myForm').validate().element("#cardHolder");、ページに最新のjqueryおよびjquery validateパッケージが（適切な順序で）含まれていることを使用して、jquery validateを機能させることができます。上記のコードに何か問題があると思いますか?

4

1 に答える 1

2

あなたの問題はここにあります：

$('div.nextStepBilling').click(function (e) {
    if ($(this).parent().parent().attr("id") == "newCardDiv") {
        $('form#myForm').validate({
            // rules & options
            ...

プラグインの初期化.validate()方法のみなので、テスト方法ではありません。このメソッドは、ルールとオプションでプラグインを初期化する準備ができている DOM で一度だけ呼び出されます。後続の呼び出しはすべて無視されます。.validate()

このメソッドを使用して、.valid()オンデマンドで検証テストをプログラムでトリガーします。

コードは次のようになります...

$(document).ready(function() {

    $('form#myForm').validate({ // initialize the plugin
        // rules & options
    });

    $('div.nextStepBilling').click(function (e) {
        if ($(this).parent().parent().attr("id") == "newCardDiv") {
            $('form#myForm').valid(); // triggers a test on the form
            ...

シンプルなデモ: http://jsfiddle.net/zSq94/およびhttp://jsfiddle.net/zSq94/1/

于 2013-08-14T15:58:38.460 に答える