Question

我在Bootstrap Modal Popup中打开一个HTML表单并应用Bootstrap验证它工作正常但是当我打开相同的表单并填写json数据时，Bootstrap验证不起作用。

以下是我的功能

specialtyDetail = {
params: [],
Load: function (params) {
    specialtyDetail.params = params;
    specialtyDetail.ValidateSpecialty();
    specialtyDetail.LoadSpecialty();
},


LoadSpecialty: function () {
    if (specialtyDetail.params.mode == "Add") {

    }
    else if (specialtyDetail.params.mode == "Edit") {

        specialtyDetail.FillSpecialty(specialtyDetail.params.SpecialtyId).done(function (response) {

            if (response.status != false) {

                var specialty_detail = JSON.parse(response.SpecialtyFill_JSON);
                var self = $("#specialtyDetail");
               self.bindMyJSON(true, specialty_detail);
                if (specialty_detail.chkActive == 'True')
                    $("#specialtyDetail #chkActive").attr("checked", true);
                else
                    $("#specialtyDetail #chkActive").attr("checked", false);

                specialtyDetail.ValidateSpecialty();

            }
            else {
                utility.DisplayMessages(response.Message, 3);
            }
        });

    }
},
 ValidateSpecialty: function () {
    $('#frmSpecialtyDetail')
       .bootstrapValidator({

           message: 'This value is not valid',
           excluded: [':disabled'],
           feedbackIcons: {
               valid: 'glyphicon glyphicon-ok',
               invalid: 'glyphicon glyphicon-remove',
               validating: 'glyphicon glyphicon-refresh'
           },
           fields: {
               ShortName: {
                   group: '.col-md-6',
                   validators: {
                       notEmpty: {
                           message: 'Short Name is required'
                       }
                   }
               }
           }
       })

    .on('success.form.bv', function (e) {
        e.preventDefault();
        var $form = $(e.target);

        // Get the BootstrapValidator instance
        var bv = $form.data('bootstrapValidator');

        specialtyDetail.SpecialtySave();
    });
}

下面是我的HTML表单。

<div id="specialtyDetail" class="modal fade" data-keyboard="false" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">

<div class="modal-dialog modal-dialog-sm">
    <div class="modal-content ">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" onclick="specialtyDetail.UnLoad();"><span class=" red" aria-hidden="true">&nbsp;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">Specialty</h4>
        </div>
        <div class="modal-body">
            <div id="tblspecialtyDetail">

                <form id="frmSpecialtyDetail" method="post">
                    <!--start - CONTENTS-->
                    <div class="form-group">
                        <div class="col-md-6">
                            <label class="control-label">Short Name <span class="required">*</span></label>
                            <input class="form-control size100" name="ShortName" id="txtShortName" type="text" maxlength="10" />
                        </div>
                        <div class="col-md-4 pad-a-labelsize">
                            <div class="checkbox-custom checkbox-default">
                                <input type="checkbox" checked="" id="chkActive">
                                <label for="Active">Active</label>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <label class="control-label">Description</label>
                            <input class="form-control" id="txtDescription" type="text" maxlength="55" />
                        </div>
                        <div class="col-md-6 pad-a-labelsize-btn">
                            <div class="btn-block">
                                <button class="btn btn-primary btn-sm" type="submit" id="btntest" onclick="specialtyDetail.test();" >Save</button>
                            </div>
                        </div>
                    </div>
                </form>

            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

下面是我的绑定json函数。

bindMyJSON: function (bAuto, myJson) {
    var self = this;
    self.loadDropDowns(true).done(function () {
        self.selectDropDowns(bAuto, myJson);
    });
    self.loadLabels(bAuto, myJson);
    self.selectCheckBoxes(bAuto, myJson);
    self.loadTextBoxes(bAuto, myJson);

    self.find('[type=hidden],[type=text], textarea').each(function () { this.defaultValue = this.value; });
    self.find('[type=checkbox], [type=radio]').each(function () { this.defaultChecked = this.checked; });
    self.find('select option').each(function () { this.defaultSelected = this.selected; });

    var html = self.html();
    //for (prop in myJson) {
    //    var regex = new RegExp("{@" + prop + "}", "g");
    //    html = html.replace(regex, myJson[prop]);
    //}
    this.html(html);
}

我希望我能在这件事上得到任何帮助，因为我被困在这里，找不到任何帮助。当我在编辑模式下打开表单并填写表单时，为什么我的验证不起作用。

Answer 1

尝试在此行之后重新初始化验证器

this.html(html);

<强>更新

$('#frmSpecialtyDetail')
   .bootstrapValidator({

       message: 'This value is not valid',
       excluded: [':disabled'],
       feedbackIcons: {
           valid: 'glyphicon glyphicon-ok',
           invalid: 'glyphicon glyphicon-remove',
           validating: 'glyphicon glyphicon-refresh'
       },
       fields: {
           ShortName: {
               group: '.col-md-6',
               validators: {
                   notEmpty: {
                       message: 'Short Name is required'
                   }
               }
           }
       }
   })

运行这些后线

Bootstrap模态弹出验证不起作用

1 个答案: