Knockout Mapping + Validation

by thedude458

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<fieldset>
    <!-- the validation for this field is provided via the ko.observable().extend() method -->
    <label>Name: <input data-bind="value: name" /></label>
    
    <!-- the validation for this field is provided via the "required" HTML5 attribute -->
    <label>Email: <input data-bind="value: email" required /></label>
</fieldset>

<div>
    <button type="button" data-bind='enable: isValid()'>Submit</button>
</div>

CSS

label { display: block; margin-top: 5px }

JavaScript

ko.validation.configure({
    parseInputAttributes: true
});

var data = { name: "Joe Shmo", email: "[email protected]" };

var validationMapping = {
    'name': {
        create: function(options) {
            return ko.observable(options.data).extend({required: true});
        }
    }
}

var viewModel = ko.validatedObservable(ko.mapping.fromJS(data, validationMapping));
ko.applyBindings(viewModel);