title: Fire jquery unobtrusive validation with bootstrap , Asp.net Mvc 3 and backbone
body: <p>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: </p>
  
  <p>Backbone Template with Twitter bootstrap which is the Login template (underscore templating engine).</p>
  
  <pre><code>@using (@Html.BeginForm("Login", "Home", FormMethod.Post, new { @class = "form-horizontal" }))
                 {
                 &lt;div class="modal-body"&gt;
                     &lt;div class="control-group"&gt;
                          &lt;label class="control-label" for="inputEmail"&gt;Email&lt;/label&gt;
                          &lt;div class="controls"&gt;
                              @*&lt;input type="text" id="inputEmail" placeholder="Email"&gt;*@
                              @Html.TextBox("Email", "", new { @placeholder = "Email" })
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="control-group"&gt;
                          &lt;label class="control-label" for="inputPassword"&gt;Password&lt;/label&gt;
                          &lt;div class="controls"&gt;
                              &lt;input type="password" id="inputPassword" placeholder="Password"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="control-group"&gt;
                      @*&lt;div class="controls"&gt;
                          &lt;label class="checkbox"&gt;
                              &lt;input type="checkbox"&gt; Remember me
                          &lt;/label&gt;
                          &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
                      &lt;/div&gt;*@
                  &lt;/div&gt;
               &lt;/div&gt;
                 &lt;div class="modal-footer"&gt;
                      @*&lt;a class="btn" href="#" id="closeBtn"&gt;Close&lt;/a&gt;*@ &lt;button type="submit" class="btn btn-primary" &gt;Login&lt;/button&gt;
                 &lt;/div&gt;
                 }  
  </code></pre>
  
  <p>The Coffeescript for Login view</p>
  
  <pre><code>require ['backbone','bootstrap','jqValUnobtrusive'],(Backbone) -&gt;   
  class LoginView extends Backbone.View
  
      el:$("#content")        
  
      initialize: -&gt;                      
          @render()
          @validationOptions = @options.validationOptions
  
      validationOptions:
          rules:
              'Email':
                  required:true
              'user[password]':
                  required:true
      close:-&gt;
          console.log "hello"
      render : -&gt;     
          $(@el).find("#login").html _.template $("#loginTemplate").html() 
  
  App = new LoginView
  </code></pre>
  
  <p>And My controller to add Server side logic to validation rule in absence of javascript from the browser </p>
  
  <pre><code>[HttpPost]
      [ValidateInput(true)]
      public ActionResult Login(FormCollection Form)
      {
          ViewBag.Message = "Method posted";
          if (Form["Email"] == string.Empty)
          {
              ModelState.AddModelError("Email", "Please Provide a Username");
              ModelState.SetModelValue("Email", ValueProvider.GetValue("Email"));
  
          }
          return View();
      }
  </code></pre>
  
  <p>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? </p>
  
  <p>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! </p>