Dynamic Knockout Validation

by LanFeusT

HTML

<script src="https://rawgithub.com/ericmbarnard/Knockout-Validation/master/Src/knockout.validation.js"></script>
<div id='container'>
    <select data-bind="value: feature, options: features, optionsCaption: 'Select'"></select>
    
    <br/>
    
    <button data-bind='click: attachRequired'>Enable Required</button>
    <button data-bind='click: removeRequired'>Disable Required</button>
    <button data-bind='click: showMessages'>Show errors</button>
    
</div>

<script id="customMessageTemplate" type="text/html">
    <em class="customMessage" data-bind='validationMessage: field'></em>
</script>

CSS

label { display: block; }
.validationMessage { color: Red; }
.customMessage { color: Orange; }

JavaScript

ko.validation.configure({
    //decorateElement: true,
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: 'customMessageTemplate'
});


function viewModel(){
    var self = this;
    
     self.errors = ko.validation.group(self, {
        deep: false,
        observable: false
    });

    self.feature = ko.observable();
    self.features = ["test1", "test2", "test3"];
    
    self.attachRequired = function () {
        self.feature.extend({
            required: true
        })  
    };
    
    self.removeRequired = function () {
        self.feature.extend({ validatable: false });
    };
    
    self.showMessages = function () {
        self.errors.showAllMessages();
        console.log(self.errors()[0]());
    };
}


var model = new viewModel();

ko.applyBindings(model);