3

jQuery (1.8.2) と検証プラグイン(1.10.0) を使用してフォームを検証しています。私の問題は、カスタムを設定すると、invalidHandlerエラーが発生してもフォームが送信されることです。

ロングバージョン

フォームは非常に長く、( を使用して) ビューから非表示にできるいくつかのフィールドがありjQuery.toggle()、フォームの操作が簡単になります。現在、これらのフィールドの一部は「オプションで必須」です。つまり、対応するチェックボックスがチェックされている場合にのみ、その内容を気にします。したがって、次のようなバリデーターがあります。

emailInvitationTitle: {
     required: function() {
        return $("#emailInvitation_chk").prop("checked");
    }
},
emailInvitationBody: {
    required: function() {
        return $("#emailInvitation_chk").prop("checked");
    }
}

ここまでは順調ですね。ただし、これらの「非表示の可能性がある、必須の可能性がある」フィールドのいずれかが送信時に無効である場合は、関連する非表示セクションを (クラス「messageEditor」で) 表示したいと考えています。だから私はinvalidHandlerこのようなものを持っています:

invalidHandler: function(form, validator) {
    // If either title or body is empty, make sure their parent div is visible
    if (!(validator.element("#emailInvitationTitle") 
            && validator.element("#emailInvitationBody"))) {
        $("#emailInvitationTitle").closest(".messageEditor").show();
    }
}

問題は、 this を定義することinvalidHandlerで、検証が成功するかどうかに関係なく、フォームが常に送信されるように見えることです。私は掘り下げてjquery.validate.js、次のことを観察しました（331行目以降）：

    // http://docs.jquery.com/Plugins/Validation/Validator/form
    form: function() {
        this.checkForm();
        $.extend(this.submitted, this.errorMap);
        this.invalid = $.extend({}, this.errorMap);
        if (!this.valid()) {
            $(this.currentForm).triggerHandler("invalid-form", [this]);
        }
        this.showErrors();
        return this.valid();
    },

半分でも理解しているふりはしません。しかし、これをたどると、最初の呼び出しでthis.valid()正しく返されることに気付きました。これにより、トリガーが発生します。しかし、直後に降伏。どういうわけか、トリガー (?) がバリデーターの配列をクリアし、無効なフォームが送信されます。falseinvalidHandlerreturn this.valid()trueerrorList

これは検証プラグインのバグですか、それとも jQuery 自体 (または他の何か) ですか?

修正/回避策の提案はありますか?

4

2 に答える 2

0

最終的に使用するようになった回避策で自分の質問に答えます。

formの関数を変更して、この問題を回避しましたjquery.validate.js。

// http://docs.jquery.com/Plugins/Validation/Validator/form
form: function() {
    this.checkForm();
    $.extend(this.submitted, this.errorMap);
    this.invalid = $.extend({}, this.errorMap);
    var errorListCopy = this.errorList.slice(); // hack, step 1
    if (!this.valid()) {
        $(this.currentForm).triggerHandler("invalid-form", [this]);            
        this.errorList = errorListCopy.concat(this.errorList); // hack, step 2
    }
    this.showErrors();
    return this.valid();
},

まだ正しい方法とは思えませんが、私にとってはうまくいきました。

于 2013-01-26T08:52:31.903 に答える