jquery - 使用jqBootstrapValidation插件为元素动态添加验证

我在表单中使用jqBootstrapValidation plugin进行客户端验证。我的要求是以下流程：


有一个下拉类型#type，其中具有custom和other作为
类validation-field的选项。
我也有两个文本框，分别是#custom和other
具有类validation-field。
我需要将custom设置为required
的#type是custom，并且在以下情况下需要将other设置为required
#type的值为is other。所以我将类validation-field添加到
字段（包括用于验证的字段），然后删除
validation-field来自验证不需要的字段。


问题：
通过再次调用函数init_validation将字段添加到验证功能中是可行的，但是删除字段（即）将下拉列表从other更改为custom后，不应验证#other文本框。但它同时验证“ #other”和“ #format”

HTML：

<form method="post" action="" class="form-horizontal" role="form" novalidate="novalidate">
    <div class="form-group">
        <label class="col-sm-2 control-label required" for="type">Type</label>
        <div class="col-sm-5">
            <select id="type" name="type" class="form-control validation-field">
                <option value="single">Single</option>
                <option value="multiple">Multiple</option>
                <option value="other">Other</option>
                <option value="custom">Custom</option>
            </select>
        </div>
        <span class="help-block">
        </span>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label" for="other">Other</label>
        <div class="col-sm-5">
            <input type="text" id="other" name="other" class="form-control" required="required" data-validation-required-message="This field is required if type is Other" />
        </div>
        <span class="help-block">
        </span>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label" for="custom">Custom</label>
        <div class="col-sm-5">
            <input type="text" id="custom" name="custom" class="form-control" required="required" data-validation-required-message="This field is required if type is Custom" />
        </div>
        <span class="help-block">
        </span>
    </div>

    <div class="form-group">
        <div class="col-sm-2"></div>
        <div class="col-sm-5">
            <button type="submit" id="submit" name="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

Javascript：

$(document).ready(function(){
    //Init Validation
    init_validation();

    //On Selecting Field Type
    $("#type").change(function(){
        switch ($(this).val()) {
            case "custom":
                element_required="#custom";
                element_not_required="#other";
                break;
            case "other":
                element_required="#other";
                element_not_required="#custom";
                break;
            default:
                element_required="";
                element_not_required="#other"+","+"#custom";
                break;
        }
        $(element_required).addClass("validation-field");
        $(element_not_required).removeClass("validation-field");
        $(element_not_required).closest(".form-group").removeClass("has-error");
        $(element_not_required).closest(".form-group").find(".help-block").html("");
        jqvalidation=undefined;
        init_validation();
    });

});

function init_validation() {
    var jqvalidation=$(".validation-field").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
            alert("Error");
        },
        submitSuccess: function($form, event) {
            alert("Success");
        }
    });
    console.log(jqvalidation);
}

小提琴的链接：http://jsfiddle.net/3hczf/

最佳答案

经过几天尝试，终于找到了解决方案。这可以帮助其他人重新启动验证过程。

更换

jqvalidation=undefined;

通过

$("input,select,textarea").jqBootstrapValidation("destroy");

更新的小提琴：http://jsfiddle.net/3hczf/4/