knockout-validation example

Knockout-Validation#147 (working and failing)

by Cristian Trifan

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://rawgit.com/Knockout-Contrib/Knockout-Validation/master/Dist/knockout.validation.js"></script>
<div class="well well-small">
    <p>
        This example is for showing that validation will <code>fail</code> if 
        the observable created by <var>validatedObservable</var>
        contains a nested view model with observable properties.
    </p>
</div>

<div class="well well-large">
    <div class="form-horizontal">
        <div class="form-group" data-bind="validationElement: name">
            <div>
                <label class="control-label">Name:</label>
                <input class="form-control" type="text" data-bind="textInput: name"/>
            </div>
        </div>
        
        <div class="form-group" data-bind="validationElement: profile().email">
            <div style="margin-bottom: 20px;">
                <label class="control-label">Email:</label>
                <input class="form-control" type="text" data-bind="textInput: profile().email" />
            </div>
        </div>
    </div>
</div>

JavaScript

ko.validation.init({
    messagesOnModified: false, 
    decorateElementOnModified: false, 
    errorMessageClass: 'help-block', 
    errorElementClass: 'has-error'
});


var failingViewModel = ko.validatedObservable({
    name: ko.observable('').extend({required: true}),
    profile: ko.validatedObservable({
        email: ko.observable('').extend({required: true, email: true})
    })
}, {observable:0});


ko.applyBindings(failingViewModel);