KnockoutJS validation

by Jeff

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<label>First name:
    <input data-bind='value: firstName' />
</label>
<br/>
<label>Last name:
    <input data-bind='value: lastName' />
</label>
<br/>
<button type="button" data-bind='click: submit'>Submit</button>
<br/>
<span data-bind='text: errors().length'></span> errors

JavaScript

var viewModel =  function() {
       ko.validation.configure({
            decorateElement: true,
            registerExtenders: true,
            messagesOnModified: true,
            insertMessages: true,
            parseInputAttributes: true,
            messageTemplate: null
        });
       
        this.firstName = ko.observable().extend({
            required: true
        });
        this.lastName = ko.observable().extend({
           required: true,
           pattern: {
               message: 'Hey this doesnt match my pattern',
               params: '^[A-Z0-9]+$'
           }});

        this.submit = function () {
            if (this.errors().length == 0) {
                alert('Thank you.');
            } else {
                this.errors.showAllMessages();
            }    
        };               
        this.errors = ko.validation.group(this);
    };
    
    ko.applyBindings(new viewModel());