6

フォームを送信する前に、フォームの特定のフィールドで追加のチェックとフォーマットを実行しようとしています。したがって、basisistancejquery検証プラグインを使用しました。すべての必須エラーメッセージを適切に表示するのでうまく機能しますが、必要な値を指定するとすぐに、フォームは単に送信します。この時点でsubmitHandlerは、トリガーされているかどうかさえわかりません。何か案は？

フォームhtml： http: //jsfiddle.net/7PAZU/

$(function() {
    $("#commentForm").validate({
        rules: {
            bill_first_name: {
                required: true
            },
            bill_last_name: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            Phone: {
                required: true,
                number: true
            },

            bill_address_one: {
                required: true
            },
            bill_city: {
                required: true
            },
            bill_state_or_province: {
                required: true
            },
            charge_total: {
                required: true,
                float: true
            },
        },
        messages: {
            bill_first_name: {
                required: "Please put in First Name"
            },
            bill_last_name: {
                required: "Please put in last Name"
            },
            email: {
                required: "Please enter a valid email"
            },
            phone: {
                required: "Please enter a valid Phone Number"

            },

            bill_address_one: {
                required: "Please put in Address"
            },
            bill_city: {
                required: "Please put in  City"
            },
            bill_state_or_province: {
                required: "Please put in state"
            },
            charge_total: {
                required: "Please put Amount In Whole number such as 10.00",
                number: "Please put in Amount In Whole number such as 10.00"
            },
        },
        submitHandler: function(frm) {
            $("#charge_total").val(parseFloat($("#charge_total").val()).toFixed(2));
            alert("Dukhche Na");
            return false;
        }
    });
})​
4

2 に答える 2

8

存在しない検証ルールを使用しているため、コードが失敗しています。

charge_total: {
                required: true,
                float: true // there's no validator named `float`
            } // Comma removed here

しかしfloat、そのプラグインで指定されたバリデーターはありません。それを削除すると、正常に動作します。必要に応じて、カスタムfloatバリデーターを作成できます。

ワーキングフィドル

ここで利用可能なルールのリストを確認してくださいhttp://docs.jquery.com/Plugins/Validation#Validator

どうやってこれを見つけたの？

コンソールを確認したところ、このエラーがスローされていることがわかりました

Uncaught TypeError: Cannot call method 'call' of undefined

プラグインソースファイル内の次の行から

var result = $.validator.methods[method]
      .call( this, element.value.replace(/\r/g, ""), element, rule.parameters );

意味$.validator.methods[method]は未定義です。これは、存在しないバリデーターを使用していることを証明します。

そこで、利用可能な検証方法のリストを確認したところ、利用できないルールをyour rules使用していることがわかりました。float

したがって、JSはこのエラーをスローして実行を停止しているため、あなたsubmit handlerは呼び出されず、フォームが送信されます（これは、使用を禁止しない限り、デフォルトの動作ですJS）。

于 2012-06-22T08:46:16.417 に答える
2

IEは、余分なコンマを使用すると特に注意が必要です...最初にコンマを削除してください：

$(function() {
    $("#commentForm").validate({
        rules: {
            bill_first_name: {
                required: true
            },
            bill_last_name: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            Phone: {
                required: true,
                number: true
            },

            bill_address_one: {
                required: true
            },
            bill_city: {
                required: true
            },
            bill_state_or_province: {
                required: true
            },
            charge_total: {
                required: true,
                float: true
            } // Comma removed here
        },
        messages: {
            bill_first_name: {
                required: "Please put in First Name"
            },
            bill_last_name: {
                required: "Please put in last Name"
            },
            email: {
                required: "Please enter a valid email"
            },
            phone: {
                required: "Please enter a valid Phone Number"

            },

            bill_address_one: {
                required: "Please put in Address"
            },
            bill_city: {
                required: "Please put in  City"
            },
            bill_state_or_province: {
                required: "Please put in state"
            },
            charge_total: {
                required: "Please put Amount In Whole number such as 10.00",
                number: "Please put in Amount In Whole number such as 10.00"
            } // Comma removed here
        },
        submitHandler: function(frm) {
            $("#charge_total").val(parseFloat($("#charge_total").val()).toFixed(2));
            alert("Dukhche Na");
            return false;
        }
    });
})​
于 2012-06-22T08:22:50.223 に答える