validation on a dialog

How can I apply validation criteria to fields in a dialog?

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/ericmbarnard/Knockout-Validation/master/Src/knockout.validation.js"></script>
<script id="customMessageTemplate" type="text/html">
    <em class="customMessage" data-bind='validationMessage: field'></em>
</script>

<button id="start" type="button" data-bind='click: openDialog'>Start</button>


<!--  ko with: dialog -->
<div id='registrationDialog' class="dialog"
    data-bind="dialog: {autoOpen: false, modal: true, closeOnEscape: true, title: 'Register'}, openWhen: open">
    <div class="message" data-bind="text: message"></div>
    <form>
        <div>
            <label class="labelarea" for="name">Name</label>
            <input type="text" id="name" data-bind="value: name" />
        </div>
        <div>
            <label class="labelarea" for="email">E-mail</label>
            <input type="email" id="email" data-bind="value: email" />
        </div>
        <button id="registerButton" type="submit" data-bind="click: registerNewUser, enable: isValid()">Register</button>
    </form>
</div>
<!-- /ko -->

CSS

label { display: block; }
.validationMessage { color: Red; }
.customMessage { color: Orange; }

JavaScript

ko.bindingHandlers.dialog = {
        init: function(element, valueAccessor, allBindingsAccessor) {
            var options = ko.utils.unwrapObservable(valueAccessor());
            setTimeout(function() { 
                $(element).dialog(options || {});
            }, 0);

            //handle disposal (not strictly necessary in this scenario)
             ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
                 $(element).dialog("destroy");
             });   
        },
        update: function(element, valueAccessor, allBindingsAccessor) {
             var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().openWhen);
             var options = ko.utils.unwrapObservable(valueAccessor());
             var $elem = $(element);
             var dynamicOptions = ko.utils.unwrapObservable(allBindingsAccessor().dynamicOpts) || {};
             $elem
                 .dialog(shouldBeOpen ? "open" : "close");
             if (dynamicOptions.title)
                 $elem.dialog("option", "title", ko.utils.unwrapObservable(dynamicOptions.title));
        }
};


ko.validation.rules.pattern.message = 'Invalid.';
    

ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null
});


function viewModel() {
    
    var self = this;
    
    this.dialog = ko.validatedObservable(new RegistrationDialog(this));
    
    this.openDialog = function() {
        self.dialog().openDialog();
    }
};
    
function RegistrationDialog(viewModel) {
    var self = this;
    this.viewModel = viewModel;
    
    this.name = ko.observable();
    this.name.extend({required: true, minLength: 3});
    this.email = ko.observable();
    this.email.extend({required: true, email: 'This'});
    this.open = ko.observable(false);
    this.message = ko.observable();
    
    this.setMessage = function(text) {
        if (self.open())
           ...