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

Question

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

1. 有一个下拉类型#type，其中有custom和other作为带有 validation-field 类的选项。
2. 我还有两个文本框，#custom 和 other，它们没有有类validation-field。
3. 当值时，我需要将自定义设置为必需 #type 是自定义，并且需要将other 设置为required #type 的值为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);
}

fiddle 链接:http://jsfiddle.net/3hczf/

Answer 1

经过几天的尝试，终于找到了解决办法。这可能会帮助其他重新启动验证过程的人。

替换

jqvalidation=undefined;

由

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

更新的 fiddle :http://jsfiddle.net/3hczf/4/