Knockout Validation

by paultyng

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<div>
    <span data-bind="visible: !isValid()">You have errors!</span>
    
    <input data-bind="value: firstName" />
    <input data-bind="value: lastName" />
    <textarea data-bind="value: text"></textarea>
    <span data-bind="text: fullName" />
</div>

JavaScript

(function() {

    var currentState = JSON.stringify({
        firstName: 'Paul',
        lastName: 'Tyng',
        text: 'Text' 
    })
        
        , viewModel = ko.mapping.fromJSON(currentState);
    
    viewModel.isValid = ko.dependentObservable(function() {
        return this.firstName().length > 0 && this.lastName().length > 0;
    }, viewModel);
    
    viewModel.fullName = ko.dependentObservable(function() {
        return this.firstName() + ' ' + this.lastName();
    }, viewModel);
        
    ko.applyBindings(viewModel);
})();