2013-05-15 82 views
0

而不是以自定義的方式對由Html.ValidationSummary()生成的data-valmsg-summary進行樣式設置,我想僅顯示應用了twitter引導樣式的框只要字段驗證失敗就可以使用它。我會如何去做這件事?目前我的標記看起來像這樣:如何在數據驗證觸發時顯示驗證格

.. 
<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> You seem to be missing something: 
       <ul> 
        <li style="display: none"></li> 
       </ul> 
      </div> 
     </form> 
    </div> 
</div> 

我已經嘗試添加樣式=「顯示:無」我的DIV,但似乎並不要麼做的伎倆。

回答

1

我正在尋找別的東西,並偶然發現了這個。以爲自從我遲到5個月後,我會爲下一個人發佈答案。準備好您的文檔。

//I dont want to validate my ajax forms take that if statement out if you 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 the errors 
    for (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 the element to validate 
     var elementMessage = validator.errorList[x].message; // gets the message 
     $group.addClass("has-error"); // adds the bootstrap class has-error to the group 
     $element.popover({ content: elementMessage, placement: "right" }).popover("show"); // adds a popover 

     message += "<li>" + elementMessage + "</li>"; //appends message to list 
    } 
    message += "</ul>"; 

    // Function I have to add alert to the page, but basically you can do whatever you want with the message now. 
    RegisterError("There was some errors with your submission!", message, false); 
});