asp.net mvc - How can I show a validation div when data-validation triggers -

instead of styling data-valmsg-summary produced html.validationsummary() in custom way, show box twitter bootstrap style applied whenever field validation fails. how go doing this? markup looks this:

.. <script src="@url.content("~/scripts/jquery.validate.js")" type="text/javascript"></script> <script src="@url.content("~/scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>  <div class="container">     <div class="row-fluid">         <br />         <br />         <br />         <br />     </div>     <div class="row-fluid">         <form class="navbar-form pull-right" action="/login?returnurl=%2f" method="post">             <h3 class="modal-header">please sign in</h3>             <input data-val="true" data-val-required="the&#32;username&#32;field&#32;is&#32;required." id="username" name="username" type="text" class="input-large" placeholder="username">             <input data-val="true" data-val-required="the&#32;password&#32;field&#32;is&#32;required." id="password" name="password" type="password" class="input-large" placeholder="password">             <label class="checkbox">                 <input type="checkbox" value="remember-me">                 remember me             </label>             <button type="submit" class="btn btn-danger">sign in</button>             <br />             <br/>             <div data-valmsg-summary="true" class="alert alert-danger alert-block" id="formval" >                 <span class="close pull-right" data-dismiss="alert">&times;</span>                 <strong>ooops!</strong> seem missing something:                 <ul>                     <li style="display: none"></li>                 </ul>             </div>         </form>     </div> </div> 

i've tried adding style="display: none" div, not seem trick either.

i looking else , stumbled on this. thought post answer next person since 5 months late. add document ready.

//i dont want validate ajax forms take if statement out if want 2. if ($('form:not([data-ajax="true"])').length != 0) {         var settings = $.data($('form:not([data-ajax="true"])')[0], 'validator').settings;         settings.submithandler = function (form) {             //success             form.submit();         };     }   $("form").bind("invalid-form.validate", function (form, validator) {      var errors = validator.numberofinvalids();     var message = "<ul>";       //loop thru errors     (var x = 0; x < validator.errorlist.length; x++) {         var $group = $(validator.errorlist[x].element).parent().parent(); //gets bootstrap class of form-group         var $element = $(validator.errorlist[x].element); // gets element validate         var elementmessage = validator.errorlist[x].message; // gets message         $group.addclass("has-error"); // adds bootstrap class has-error group         $element.popover({ content: elementmessage, placement: "right" }).popover("show"); // adds popover          message += "<li>" + elementmessage + "</li>"; //appends message list     }     message += "</ul>";      // function have add alert page, can whatever want message now.     registererror("there errors submission!", message, false);  });