Question

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

有一个下拉类型#type，其中包含custom和other 类validation-field的选项。
我还有两个文本框，#custom和other，它们都没有有班级validation-field。
我需要在值custom时required #type的{{1}}为custom，需要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);
}

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

Answer 1

经过几天的努力，终于找到了解决方案。这可能有助于重新启动验证过程的其他人。

替换

jqvalidation=undefined;

通过

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

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

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

1 个答案: