Stack Overflow 20756150

Knockout validation. Get Observable value

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.js"></script>
<script src="http:////cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div id="content">
    <form data-bind="submit: onSubmit">
        <dl>
            <dt><label for="name">Name:</label></dt>
            <dd><input type="text" data-bind="formField: 'name', value: name"/></dd>
            <dt><label for="title">Title:</label></dt>
            <dd><input type="text" data-bind="formField: 'title', value: title"/></dd>
            <input type="submit"/>
        </dl>
    </form>
</div>

CSS

FORM DT {
   clear:both;
   width:11%;
   float:left;
   text-align:right;
}

FORM DD {
   float:left;
   width:88%;
   margin:0 0 0.5em 0.25em;
}

.error {
    background-color: red;
}

JavaScript

ko.validation.init({
    decorateElement: true,
    errorElementClass: 'error'
});

ko.bindingHandlers.formField = {
    init: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        element.id = element.name = value;
    }
}

function required(value) {
    return {
        create: function (options) {
            return ko.observable(options.data).extend({ required: value });
        }
    }
}

function ViewModel(data) {
    ko.mapping.fromJS(data, {
        name: required(true),
        title: required(true),
        ignore: ['validationModel']
    }, this);
    
    this.validationModel = ko.validatedObservable({
        name: this.name,
        title: this.title
    });
}
ko.utils.extend(ViewModel.prototype, {
    onSubmit: function (element) {
        var message;
        if (this.validationModel.isValid())
            message = 'You submitted:\n' + ko.mapping.toJSON(this);
        else
            message = 'There were errors in submission';
        alert(message);
    }
});

var model = {
    name: 'bob',
    title: 'foobar'
};
var viewModel = new ViewModel(model);

ko.applyBindings(viewModel, document.getElementById('content'));