Losing my mind from jquery validate and knockout

Question

I have been trying to do this for months, and months, and months, and months. And I am literally at the point of tears from trying to get Knockout to work for me.

I have posts dating back way last year trying to do this. I just simply cannot get validation to work with knockout and asp.net mvc.

If I put the $.validator.unobtrusive.parse("#__frmAspect"); line in, I get the validation, but then it does not obey the submit handler. If I take that out, it obeys the submit handler, but it does not get any validation.

This is my code - all of it. (I think)

Main View

http://pastie.org/2016031

Editor View

http://pastie.org/2016043

View Model

http://pastie.org/2016045

Controller and Model Binder

http://pastie.org/2016052

Html Output

http://pastie.org/2016100

HtmlTags class

http://pastie.org/2016107

Helpers

http://pastie.org/2016111

I have been stuck on this for literally going on 8 months. Can anyone please help me? All I want is to submit the data back to the server. I don't want ajax, I don't want a callback. I don't want anything fancy. I just want to send my JSON model back to the server after proper client validation, and have it get the data. That is all I want. I do not want to use the $.ajax method. I have reasons for why I want to do it this way, and they are not relevant to the question.

Response to RP Niemeyer

Yes, that worked!!!!!!!! oh my god. I owe you like ,the last 8 months of my life. I want to send you a cheesecake smothered in raw calories of taste and internets.

I feel like I could punch the screen from how frustrated this problem made me. I'm sorry if the question sounded rude, but no where on the internet have I seen this kind of thing. I'm sure any other developer can understand the frustration of a problem that just does not seem to have an answer.

I have no idea how you came to this conclusion and I don't understand exactly why it worked.

I tried the same thing with an object-instanced view model (where the view model was not its own object, but an instance of another object) and it didn't work. In other words, if I do ..

var aspect = function () { 
  this.Id = ko.observable(); 
 // other variables, using ';' and 'this' keyword 
 this.Save = function() { 
   alert('We got to the save function'); 
 } 
} 

var viewModel = new aspect(); 
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; 

This approach did not work. Can I bother you to explain to me what is different, and why? I am completely lost.

Answer 1

I think that the issue is that the unobtrusive library will have already setup validation on the form, so you would actually need to go in and set the submitHandler like:

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

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

http://jsfiddle.net/rniemeyer/V8MhG/