javascript - 对动态添加的组合框进行 Bootstrap 验证器验证

Question

我有一个带有两个组合框的表单。第二个组合框最初带有空值选项。第二个组合框的值是通过另一个文件中的 php 脚本根据第一个组合框的值动态添加的，该脚本计算第二个组合框的值D b。我使用innerhtml方法将组合框替换为php中的html。现在， Bootstrap 验证器在选择第二个组合框时无法识别第二个组合框值的变化。它假设第二个组合框的值为空。如何让它在添加值后再次扫描？

<!--main.html-->
<div class="form-group">
    <label class="col-md-3 control-label">Degree Type</label>
    <div class="col-md-6">
        <select name="dtype" onChange="display(this.value)" class="form-control">
            <option value="" selected="selected">-- Select Type --</option>
            <option value="UG">UG</option>
            <option value="PG">PG</option>
        </select>
    </div>
</div>
<div class="form-group">
    <label class="col-md-3 control-label">Name of the Department</label>
    <div class="col-md-6">
        <div id="show_dept">
            <select name="dept" class="form-control">
                <option value="" selected="selected">-- Select Dept --</option>
            </select>
        </div>
    </div>
</div>

<!--Validation-->
<script type="text/javascript">
    $(document).ready(function() {
        $('#tryitForm').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh',
                submitHandler: function(validator, form, submitButton) {
                    // Use Ajax to submit form data
                    $.post(form.attr('action'), form.serialize(), function(result) {
                        // ... process the result ...
                    }, 'json');
                }
            },
            fields: {
                dept: {
                    validators: {
                        notEmpty: {
                            message: 'The Department cannot be empty'
                        }
                    }
                }
            });
        });
</script>

<!--Ajax-->
<script type="text/javascript">
    // JavaScript Document
    var XMLHttpRequestObject = false;

    function display(dept_type) {
        if (window.XMLHttpRequest) {
            XMLHttpRequestObject = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
        }
        XMLHttpRequestObject.onreadystatechange = function() {
            if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
                document.getElementById("show_dept").innerHTML = XMLHttpRequestObject.responseText;
            }
        }
        XMLHttpRequestObject.open("GET", "get_dept.php?dept_type=" + dept_type, true);
        XMLHttpRequestObject.send();
    }
</script>


<!--get_dept.php-->
<?php 
    $con=mysql_connect( 'localhost', 'root', '') or die( 'Mysql not connected'); 
    mysql_select_db( 'db',$con) or die( 'DataBase not connected'); 
    $dtype=$_REQUEST[ 'dept_type']; 
    $query="select * from dept_mast where Deg_Type='$dtype'" ; 
?>
<select name="dept" class="form-control">
    <option value="" selected="selected">-- Select Dept --</option>
    <?php 
        $query_result=mysql_query($query)or mysql_error(); 
        while($row=mysql_fetch_array($query_result)) { ?>
        <option value="<?php echo $row[ 'Dept_Name']; ?>">
            <?php echo $row[ 'Dept_Name']; ?>
        </option>
        <?php } 
    ?>
</select>

Answer 1

由于您使用的是 jQuery，因此定义和使用自定义 ajax 处理程序是多余的。

我们试试这个方法

<script type="text/javascript">
function validate() {
    $('#tryitForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh',
            submitHandler: function (validator, form, submitButton) {
                // Use Ajax to submit form data
                $.post(form.attr('action'), form.serialize(), function (result) {
                    // ... process the result ...
                }, 'json');
            }
        },
        fields: {
            dept: {
                validators: {
                    notEmpty: {
                        message: 'The Department cannot be empty'
                    }
                }
            }
        });
    });
}

$(document).ready(function () {
    validate();
});

function display(dept_type) {
    $.get('get_dept.php', {
        dept_type: dept_type
    }, function (response) {
        $("#show_dept").empty().html(response);
        validate();
    });
}
</script>

由于您是动态附加表单控件，因此验证器不知道新元素。您需要再次调用验证器来告知您已添加一些新元素进行验证。