Combining Knockout and jQuery validate plugin

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>
<ul data-bind="foreach: contactNumbers">
    <li data-bind="text: contactNumber.formatted"></li>
</ul>
<hr/>
<form data-bind="with: newContact, submit: addContactNumber">
    <p>
        <label>Number Type:</label>
        <select data-bind="options: $parent.numberTypes, value: numberType"></select>
    </p>
    <p>
        <label>Number:</label>
        <input type="text" data-bind="value: contactNumber, valueUpdate: 'keyup'"
        />
    </p>
    <p>
        <button type="submit" data-bind="enable: isValid()">Add Number</button>
    </p>
</form>
<form data-bind="submit: saveContact">
    <p>
        <label>First Name:</label>
        <input type="text" name="firstName" data-val="true"
        data-val-required="First Name is required" /> <span class="field-validation-valid" data-valmsg-for="firstName" data-valmsg-replace="true"></span>

    </p>
    <p>
        <label>Last Name:</label>
        <input type="text" name="lastName" data-val="true" data-val-required="Last Name is required."
        /> <span class="field-validation-valid" data-valmsg-for="lastName" data-valmsg-replace="true"></span>

    </p>
    <button type="submit">Save Contact</button>
</form>
<pre data-bind="text: dataToSend"></pre>

CSS

.field-validation-error {
    color: red;
}

JavaScript

$.fn.serializeObject = function () {
    var o = {},
    a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};