Question

我正在尝试在填写数据库中的数据之后在我的表单上初始化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();
        }
    });
}

但是，验证规则永远不会应用于表单。

我做错了什么？

Answer 1

我建议您在.validate()内初始化document.ready，但不遵守规则。然后使用rules('add') method加载规则根据需要。也可以使用rules('add')在创建后立即将规则添加到动态创建的input字段中。

See this demo.点击提交按钮，没有任何反应（没有规则）。然后点击＆＃34;加载规则＆＃34;按钮和突然形式验证将在下一个适用的事件中激活。

演示： 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

});

在创建表单后初始化jQuery Validate插件

1 个答案: