jQuery validation fails when using KnockoutJS and Jquery dialog

http://stackoverflow.com/questions/5663295/jquery-validation-fails-when-using-knockoutjs-and-jquery-dialog/5669575#5669575

by rniemeyer

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<form action="/Administrator/Aspects/Edit" id="__frmAspect" method="post">
    <label for="Name">Name</label>
    
    <input data-bind="value:Name,uniqueName:true" data-val="true" data-val-regex="Invalid name. Names must be between 3 and 64 characters in length, may contain any alphanumeric character and the symbols -&amp;#39;, and whitespace only." data-val-regex-pattern="^(?!.*[ ]{2})(?!.*[&#39;]{2})(?!.*[-]{2})(?:[a-zA-Z0-9 \p{L}&#39;-]{3,64}$)$" data-val-required="The Name field is required." id="Name" name="Name" size="45" type="text" />
    <button type="submit">Submit</button>
    
</form>

CSS

.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

JavaScript

var viewModel = {
    Name: ko.observable("blah"),
    Save: function() {
        alert('we reached the save function.');

        // we will try to send the model to the server.
        ko.utils.postJson(
        $("#__frmAspect").attr('action'), {
            model: ko.toJS(this)
        });
    }
};


ko.applyBindings(viewModel, $("#__frmAspect")[0]);

// attach the jquery unobtrusive validator
$.validator.unobtrusive.parse("#__frmAspect");

// bind the submit handler to unobtrusive validation.
$("#__frmAspect").data("validator").settings.submitHandler = viewModel.Save;