jQuery Validation fails with KnockoutJS and Twitter Boostrap Modals
===

I've got a project set up where I'm using KnockoutJS along with the Twitter Bootstrap framework.  I have a screen with a list of data.  Clicking on one of the rows allows the user to edit the row's data in a modal dialog.  

My modal looks like this:

    <div class="modal hide" id="editDialog" data-bind="template: { name: 'editDialogTmpl', 'if': selectedItem, data: selectedItem }"></div>
    <script id="editDialogTmpl" type="text/html">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        <div class="modal-body">
            <form id="form-edituser" class="form-horizontal">
                <fieldset>
                    <div class="control-group">
                        <label class="control-label" for="inputNameFirst">First Name</label>
                        <div class="controls">
                            <input type="text" class="input-xlarge required" id="inputNameFirst" data-bind="value: firstName" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="inputLastName">Last Name</label>
                        <div class="controls">
                            <input type="text" class="input-xlarge required" id="inputLastName" data-bind="value: lastName" />
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
        <div class="modal-footer">
            <div class="btn-group pull-right">
                <a href="#" class="btn btn-success" data-bind="click: $root.save"><i class="icon-ok icon-white"></i> save</a>
                <a href="#" class="btn btn-danger" data-bind="click: $root.remove"><i class="icon-remove icon-white"></i> delete</a>
                <a href="#" class="btn" data-dismiss="modal">cancel</a>
            </div>
        </div>
    </script>

My validate trigger looks like this:

    $('#form-edituser').validate({
    	rules: {
    		inputLastName: 'required'
    	},
    	messages: {
    		inputLastName: 'a last name is required'
    	},
    	errorElement: 'span',
    	highlight: function (el, c) {
    		$(el).parents('.control-group').addClass('error');
    	},
    	unhighlight: function (element, errorClass, validClass) {
    		$(element).parents('.control-group').removeClass('error');
    		$(element).parents('.control-group').addClass('success');
    	},
    	submitHandler: function(){
    		console.log('submit handler called!');
    	}
    });

I open the dialog like so:

    self.edit = function(item){
        self.selectedItem(item);
        $('#editDialog').modal('show');
    };

But when I hit the "Save" button on the modal, nothing happens.  Even if I manually call the validate function, nothing happens.

My guess is it has something to do with the KnockoutJS template binding.  I would imagine that the jQuery Validation plugin parses the whole document when the DOM is loaded, but the KnockoutJS template binding for contents of the dialog don't happen until the user clicks the "edit" button.

I've tried adding the "validate" call inside the "edit" function, but that doesn't seem to help, either.

Here is a [similar question][1], but I'm not using the unobtrusive version of the jQuery Validation plugin, so the response doesn't work for me.  Is there a similar solution using just the plain-jane version of the jQuery Validation plugin?


  [1]: http://stackoverflow.com/questions/5663295/jquery-validation-fails-when-using-knockoutjs-and-jquery-dialog
