Knockout bound field with validate message

'Value' bound and 'css' bound to sub observable

by Ben Clayton

HTML

<script src="https://flowcms.infxsolutions.com/script/jQuery/jquery-2.1.1.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.0.0.debug.js"></script>
<form id='Form1'>
    <br/><br/>
    Forename:<input class='hello' data-bind="{value:forename, css: { dirty: forename.dirty(),myinvalid: forename.myinvalid() }}" type="text" name='forename' />
    &nbsp;dirty=<input   data-bind="value:forename.dirty()" /><br/>
    <br/><br/>
        Surname: <input class='world' data-bind="{value:surname, css: { dirty: surname.dirty(), myinvalid :surname.myinvalid()}}" type='text' name='surname' />
    &nbsp;dirty=<input   data-bind="value:surname.dirty()" /><br/>
</form>

CSS

a {border:1px solid black;background:#F0F0F0;padding:2px;}

.vred {color:red;}
.vblack {color:black;}
.vbkwhite {background-color:#FFFFFF;}
.vbkgreen {background-color:green;}

.dirty {font-size:20px}
.myinvalid {background-color:red;}

JavaScript

// This script uses Knockout 'value' and 'css' bindings

// http://stackoverflow.com/questions/26866516/validate-specific-controls-on-each-button-click-in-knockout-js  read for ideas on writing extenders 
// OR  http://knockoutjs.com/documentation/extenders.html

function viewModel() {
    var self=this;
    // setup data vars to bind to form elements, using ko observabvle but with an extender 'controlclass' (true or false makes no difference)
    self.forename = ko.observable().extend({controlclass:''});
    self.surname = ko.observable().extend({controlclass:''});
}


function init_ko(){    
    var vm = new viewModel();
    ko.applyBindings(vm, document.getElementById("Form1"));
    return vm;
}

ko.extenders.controlclass = function(target,initialclass) {
    //add some sub-observables to our observable
    
    target.dirty = ko.observable(false);
    target.myinvalid = ko.observable(false);
 
    target.setInvalid=function(v){
 	  if(typeof(v) != 'boolean') v=true; // defualt to true if parameter no given
      this.myinvalid(v); 
    }
    
    function setDirty(val){ // private method, parameter if used will be value of form element
       target.dirty(true); 
    }
    // init class to 'vred'
    
    target.subscribe(setDirty);
 
    //debugger;
    //return the original observable
    return target;
};

var vm1 = init_ko();
debugger;
var a=3;
// demo how to change value and class of the form elements
//vm1.forename('Ben');
//vm1.surname('Clayton');
//setInterval(function(){vm1.surname.setClass('vblack')},1000);
//vm1.surname.setClass('vred vbkgreen');
//setInterval(function(){vm1.forename.setClass('vbkwhite')},1000);
//setInterval(function(){vm1.forename.setClass('vbkgreen')},1100);