knockout-validation example

Knockout-Validation#147 (working and failing)

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>

    <p>
        <label>Choose Example</label>
        <select class="form-control" data-bind="options: examples, optionsText: 'name', value: example">
        </select>
    </p>
</div>

<div class="well well-large">
    <div data-bind="if: example().value === 'working'">
        <div class="form-horizontal" data-bind="with: example().viewModel">
            <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>
   
    <div data-bind="if: example().value === 'failing'">
        <div class="form-horizontal" data-bind="with: example().viewModel">
            <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>
           ...

JavaScript

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


try {
    /**
     * WORKING EXAMPLE
     */
    var workingViewModel = ko.validatedObservable({
        name: ko.observable('').extend({required: true}),
        profile: {
            email: ko.observable('').extend({required: true, email: true})
        }
    });
}
catch (e) {
    console.log('Error throw while creating the validated observable: ', e.message);
    console.error(e);
}

try {
    /**
     * FAILING EXAMPLE
     */
    var failingViewModel = ko.validatedObservable({
        name: ko.observable('').extend({required: true}),
        profile: ko.observable({
            email: ko.observable('').extend({required: true, email: true})
        })
    });
}
catch (e) {
    console.log('Error throw while creating the validated observable: ', e.message);
    console.error(e);
}

ko.applyBindings({
    examples: ko.observableArray([
        {
            name: 'Working',
            value: 'working',
            viewModel: workingViewModel
        },
        {
            name: 'Failing',
            value: 'failing',
            viewModel: failingViewModel
        }
    ]),
    example: ko.observable()
});