-1

ページの読み込み時ではなく、データベースからのデータが入力された後、フォームで jquery バリデーターを初期化しようとしています。

これは、バリデーターをまったく適用したくない場合があるためです。したがって、これらのレコードについては、バリデーターの初期化を呼び出しません。

フォームに入力したら、最初に「resetEditForm」メソッドを呼び出します。

function resetEditForm() {
// REMOVE VALIDATOR
g$("#editESTIPRequestForm").removeData('validator')

// DO SOME MORE FORM RESET THINGS HERE
}

次に、すべてのフィールドにデータを入力します。次に、フォームの表示モード (読み取り/専用、読み取り/書き込み) を設定します。

function setFormMode(formStatusType) {
    switch (formStatusType) {
        case "ReadOnly":
            // FORM IS IN READ ONLY MODE
            g$('#tabCenter-Data input:not(.needsIDupdate):not(.hasSelect2), #tabCenter-Data textarea:not(.needsIDupdate):not(.hasSelect2)').attr('disabled', 'disabled');
            g$('#tabCenter-Data .hasSelect2').select2("disable");
            // HIDE "REQUIRED" INDICATORS
            g$('#tabCenter-Data .astric').hide();
            // HIDE ALL BUTTONS
            g$('#tabCenter-Data .button').hide();

            break;
        case "ReadWrite":
            // FORM IS IN READ/WRITE MODE
            g$('#tabCenter-Data input:not(.needsIDupdate):not(.hasSelect2), #tabCenter-Data textarea:not(.needsIDupdate):not(.hasSelect2)').removeAttr('disabled');
            g$('#tabCenter-Data .hasSelect2').select2("enable");
            // MAKE "REQUIRED" INDICATORS VISIBLE
            g$('#tabCenter-Data .astric').show();
            // SHOW ALL BUTTONS
            g$('#tabCenter-Data .button').show();

            setupValidator();
            break;
        default:
            break;
    }
}

そして、フォームのバリデーターを初期化することになっている関数は次のとおりです。

function setupValidator() {

    g$("#editESTIPRequestForm").validate({
        ignore: null,
        errorElement: "span",
        rules: {
            detailsStatus: {
                required: true
            },
            detailsJobType: {
                required: true
            },
            detailsMpoRural: {
                required: true
            },
            detailsResponsiblePartyJurisdiction: {
                required: true
            },
            detailsTipID: {
                regexAllowedCharacters: true
            },
            detailsRoute: {
                required: true,
                regexAllowedCharacters: true
            },
            detailsLocationRpt: {
                required: true,
                regexAllowedCharacters: true
            },
            detailsWorkType: {
                required: true
            },
            detailsTransSystem: {
                required: true
            },
            detailsWorkDescriptionRpt: {
                required: true,
                regexAllowedCharacters: true
            },
            detailsTemplate: {
                required: true
            },
            detailsAirQualityConformityRequired: {
                required: true
            },
            detailsEmissionsCO: {
                number: true
            },
            detailsEmissionsCO2: {
                number: true
            },
            detailsEmissionsNox: {
                number: true
            },
            detailsEmissionsVoc: {
                number: true
            },
            detailsEmissionsPM2: {
                number: true
            },
            detailsAuthorComments: {
                regexAllowedCharacters: true
            },
            detailsMdotComments: {
                regexAllowedCharacters: true
            },
            detailsLetIndicator: {
                required: function (element) {
                    return (currentUserRole == "ADMN" || currentUserRole == "MDOT");
                }
            },
            detailsNonLetReason: {
                required: function (element) {
                    var selectedLetIndicatorValue = g$("input:radio[name='detailsLetIndicator']:checked").val();
                    return ((currentUserRole == "ADMN" || currentUserRole == "MDOT") && (selectedLetIndicatorValue == "NonLet"));
                }
            },
            detailsScheduledLetDate: {
                required: function (element) {
                    return (currentUserRole == "ADMN" || currentUserRole == "MDOT");
                }
            }
        },
        onsubmit: false,
        errorClass: "invalid",
        errorPlacement: function (error, element) {
            if (g$(element).hasClass("hasSelect2")) {
                //error.appendTo(g$(element).prev());
                error.insertAfter(g$(element).prev("div"));
            } else if (g$(element).is("input:radio")) {
                var groupName = g$(element).attr("name");
                error.insertAfter(g$("input:radio[name=" + groupName + "]:last + label"));
            } else {
                error.insertAfter(g$(element));
            }
        },
        highlight: function (element, errorClass, validClass) {
            var elementToWorkOn = element;
            if (g$(element).hasClass("hasSelect2")) {
                elementToWorkOn = g$(element).prevAll("div");
            } else if (g$(element).is("input:radio")) {
                var groupName = g$(element).attr("name");
                elementToWorkOn = g$("input:radio[name=" + groupName + "]");
            }

            g$(elementToWorkOn).addClass(errorClass).removeClass(validClass);
        },
        unhighlight: function (element, errorClass, validClass) {
            var elementToWorkOn = element;
            if (g$(element).hasClass("hasSelect2")) {
                elementToWorkOn = g$(element).prevAll("div");
            }

            g$(elementToWorkOn).removeClass(errorClass).addClass(validClass);

            if (this.numberOfInvalids() == 0) {
                g$("#estipFormErrorMessageBox").hide();
            }
        },
        invalidHandler: function (form, validator) {
            g$("#estipFormErrorMessageBox").show();
        }
    });
}

ただし、検証規則がフォームに適用されることはありません。

私は何を間違っていますか？

4

1 に答える 1

0

.validate()内で初期化することをお勧めしますdocument.readyが、ルールは使用しません。次に、必要に応じて、rules('add')メソッドを使用してルールをロードします。また、作成した直後rules('add')に動的に作成されたフィールドにルールを追加するためにも使用します。input

このデモを参照してください。 送信ボタンをクリックしても何も起こりません (ルールなし)。次に、「ルールを読み込む」ボタンをクリックすると、次の該当するイベントでフォームの検証が突然アクティブになります。

デモ: http://jsfiddle.net/BYWAb/

$(document).ready(function () {

    $('#myform').validate({
        // other options
    });

    //enclose the following block within whatever required to load these rules
    // function setFormMode(formStatusType) { // whatever
    // switch (formStatusType) { // whatever
        ...

        $('.myclass').each(function () {
            $(this).rules('add', {
                required: true,
                minlength: 5
            });
        });

    // end block

});
于 2013-01-29T17:40:08.533 に答える