Dynamically add validation to elements with jqBootstrapValidation plugin

Question

I am using jqBootstrapValidation plugin in my form for client validation. My Requirement is the following flow:

1. There is a dropdown type #type which has custom and other as options with the class validation-field.
2. I also have two textboxes, #custom and other, which donot have the class validation-field.
3. I need to make custom as required when value of #type iscustom and need to make other as required when value of #type isother. So I add the class validation-field to the field (Including it for validation), and removing validation-field from fields that is not needed for validation.

Problem: Adding fields to the validation function works by calling the function init_validation again, but removing fields (i.e) After changing the dropdown from other to custom, should not validate #other textbox. But it validates both '#other' and '#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);
}

Link for Fiddle: http://jsfiddle.net/3hczf/

Answer 1

After trying for couple of days, found a solution finally. This may help others who re initiate the validation process.

Replace

jqvalidation=undefined;

by

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

Updated fiddle: http://jsfiddle.net/3hczf/4/