bootstrapValidator 动态添加html元素的验证-蒲公英云

bootstrapValidator 动态添加html元素的验证

男娘i 2022-05-16 23:54 248阅读 0赞

1，动态添加的元素如果想要验证需要用到 addField，为相应增加的元素name添加验证

function addValShow() {
    $("#formAppointment").bootstrapValidator("addField", "department", {
        validators: {
            notEmpty: {
                message: '受访部门不能为空'
            },
            callback: {
                message: '请选择受访部门',
                callback: function (value, validator) {
                    if (value == -1) {
                        return false;
                    } else {
                        return true;
                    }
                }
            }
        }
    });
    $("#formAppointment").bootstrapValidator("addField", "employee", {
        validators: {
            notEmpty: {
                message: '受访人员不能为空'
            },
            callback: {
                message: '请选择受访人员',
                callback: function (value, validator) {
                    if (value == -1) {
                        return false;
                    } else {
                        return true;
                    }
                }
            }
        }
    });
}

2，在动态添加html元素后进行调用

$("#addfang").click(function () {
        if ($("select[name='department']").length >= visiterNum) {
            $.showMsg("每次只能添加" + visiterNum + "个受访人！");
            return;
        }
        let dep;
        $("#department option").each(function () {
            dep += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';          
        })
        let fang = '<div class="form-group">' +
            '<label class="col-sm-2 control-label">受访部门</label>' +
            '<div class="col-sm-3">' +
            '<select class="form-control department" name="department">' +
            dep+
            '</select>' +
            '</div>' +
            '<label class="col-sm-1 control-label">受访人员</label>' +
            '<div class="col-sm-3">' +
            '<select class="form-control employee" name="employee">' +
             '<option value="-1">--请选择--</option>' +
            '</select>' +
            '</div>' +
            '<span class="glyphicon glyphicon-minus delBtn" style="color:red;margin-top: 5px"></span>' +
            '</div>';
        $("#fang").append(fang);
        addValShow();//调用
    });