I tried to find the bits of information available on the net, But couldn't hook it up together. I have an application which makes use of a login page. Now I'm not binding the view to any model. However I have two inputs (Username and password). I want to fire the jquery unobtrusive validation feature that comes with Asp.net Mvc. Here are the samples:

Backbone Template with Twitter bootstrap which is the Login template (underscore templating engine).

Would someone be able to shine some light on this problem? How to put the twitter bootstrap validation messages with this jquery unobtrusive code to show the errors? Or extend the jquery unobtrusive validation plugin to work with twitter bootstrap / backbone to perform the validation?

My criteria is the username and password shouldn't be NULL or blank . A simple case for study for validating a form without model binding (I dont want to bind the Login page to any model). Rather hook up the jquery unobtrusive plugin with extending backbone and twitter bootstrap styling!

If you want the unobtrusive validation that is automatically generated by MVC, I think you need to use Data Annotations on Model objects which are bound to the view. This is the method I have used and can provide a sample. However, if you don't want to use a model, then you will have to write the jquery validation yourself, and it won't have anything to do with the MVC layer.
–
Miika L.Oct 11 '12 at 7:38

@MiikaL. Yes precisely . But Thats what I don't want actually . There is a way to put unobtrusive validation even if we dont put model . What if I want to put or render a view if I am not tieing it to a particular table ? Like a login page ? I dont want the data annotations to be applied to all but only username and password field . in that case I would never get the login to pass the validation . So to avoid that I just rendered a view with two fields username and password and validate it via form colleciton
–
JoyOct 11 '12 at 8:24

Mmm.. I think your View should not be using any database object (directly) as a Model. Rather create a ViewModel object, which would then contain the data annotations relating to that object. For example, I have a database object User, but then I have a LoginModel object with data annotations ([Required]) which only contains username and password that gets passed to my LoginView and received back by the Controller.
–
Miika L.Oct 11 '12 at 9:21

The above would also mean you don't need to write validation code in the controller, because you could just call ModelState.IsValid, and validate with the same annotations as used by the javascript.
–
Miika L.Oct 11 '12 at 9:22

@MiikaL Okay thats fine now how do i trigger the bootstrap classes with these validations then ? I mean instead of jquery ui styles I must show the twitter bootstrap error messages and styling ?
–
JoyOct 11 '12 at 9:47

There is some talk in the comments for the question, but the tech behind this script is Asp.Net MVC ViewModel object decorated with Data Annotations ([Required] in my login case), which is passed to a View and displayed with the following (only included relevant bits unless more is required).

I tried your solution its working well with postback from server . But its not doing the client side validation . Its just the way I wanted ofcourse but any ideas how validate it at client side ? I did all the required codes you have given but no client side validation . Only server side
–
JoyOct 12 '12 at 11:02

You had data annotations on the View Model object? Does your web.config set ClientValidationEnabled and UnobtrusiveJavaScriptEnabled to true? Have you got a Html.BeginForm() and @Html.ValidationSummary() within it?
–
Miika L.Oct 12 '12 at 12:02

@MiiikaL yes thanks . The issue was something different :) I got it resolved . :) so marked it as answer :)
–
JoyOct 12 '12 at 12:12

All is sorted and working as intended then? Glad I could help.
–
Miika L.Oct 12 '12 at 12:27

Miika's answer is spot on. The only thing I'm going to add to it is making it work for when the user actually corrects the errors on the page. To do, you'll need to override MVC's validation summary code to also remove the .error class from the .control-group. Here's Miika's code with this added to it:

it does not work correctly, at least for me. For example in required field I input value, set focus to different field - required field goes red, I come back to it, add value, go to next field - error is removed, so far everything is ok, I come back to required field and remove value and go to next field - bam - error message appears, but it is black.
–
GiedriusJul 11 '13 at 12:06

I've looked at proposed solutions and I haven't found one I like, so I wrote my own.

There are two problems:
1) you need to override how highlighting/unhighlighting is performed
2) ok, second problem is because of the first problem and it exists only if you're using jquery.validation.unobtrusive.js. Thing is, that you can't override highlighting/unhighlighting using setDefaults method in jquery.validate because of the way jquery.validation.unobtrusive.js works.