Wizard-Prototype Validation

by gekka

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.debug.js"></script>
<script src="http://validity.thatscaptaintoyou.com/lib/jquery.validity.js"></script>
<link rel="stylesheet" href="http://validity.thatscaptaintoyou.com/lib/jquery.validity.css">
<div id="container">
    <div id="title">
        <div id="breadcrumb">
            <ul>
                <li>My HR</li>
                <li>Personal</li>
                <li>Change my personal details</li>
            </ul>
        </div>
        <div id="help">help</div>
    </div>
    <div id="content">
        <div id="wizard">
            <div id="progress">
                <ul>
                    <li><span id="number1" class="number">1</span>Start</li>
                    <li><span id="number2" class="number">2</span>Summary</li>
                    <li><span id="number3" class="number">3</span>Inner Wizard</li>
                    <li><span id="number4" class="number">4</span>Finish</li>
                </ul>
            </div>
            <div id="steps">
                <div id="step1_0" class="step" style="display: none">
                    <div id="step1Content" class="stepContent">
                        <label for="name">Name</label>
                        <input id="name" disabled="disabled" data-bind="value: name" /><br/>
                        <label for="gender">Gender</label>
                        <select id="gender"
                            data-bind="options: genders,
                                optionsValue: 'key',
                                optionsText: 'value',
                                value: gender"
                        ></select><br/>
                        <label for="birthdate">Date of Birth</label>
                        <input id="birthdate" data-bind="validate: 'birthdate'" /><br/>
                        <label for="ssn">Social Security Number</label>
                        <input id="ssn" data-bind="validate: 'ssn'"...

CSS

.active {
    font-weight: bold;
}

.inactive {
    color: #ccc;
    cursor: pointer;
}

.visited {
    font-style: italic;
}

JavaScript

var changeMyDetailsVM = {
    name: ko.observable('Steve Svennson'),
    gender: ko.observable('male'),
    birthdate: ko.observable('01/01/1977'),
    ssn: ko.observable('123-45-678'),
    mobile : ko.observable('01231541'),
    phone: ko.observable('412-524-5212'),
    email: ko.observable('[email protected]'),
    
    genders: [
        {key: 'male', value: 'Male'},
        {key: 'female', value: 'Female'}
    ]
};

var validationInfo = {
    'birthdate' : {
        'validators' : {
            'require' : {},
            'maxLength' : {
                'max' : 10
            },
            'match' :{
                'patternName' :'\'date\''
            }
        },
        'title' : 'BirthDay'
    },
    'ssn' : {
        'validators' : {
            'require' : {
                         }
        },
        'title' : 'Social Security Number'
    },
    'phone' : {
        'validators' : {
            'require' : {},
            'maxLength' : {
                'max' : 12
            },
            'match' :{
                'patternName' :'\'phone\''
            }
        },
        'title' : 'Phone'
    },
    'mobile' : {
        'validators' : {
            'require' : {},
            'maxLength' : {
                'max' : 13
            },
            'match' :{
                'patternName' :'\'number\''
            }

        },
        'title' : 'Mobile'
    },
    'email' : {
        'validators' : {
            'require' : {
            },
            'match' :{
                'patternName' :'\'email\''
            }
        },
        'title' : 'Email'
    }
    
};



$(function () {
    ko.applyBindings(changeMyDetailsVM, $('#step1')[0]);
    ko.applyBindings(changeMyDetailsVM, $('#step2')[0]);
    $('#wizard').wizard();
});

// custombinding
ko.bindingHandlers.validate = {
    init: function(element, valueAccessor, allBindingsAccessor, context){
        var e = element,
            bindings = allBindingsAccessor(),
            value =...