0

与其以自定义方式对 Html.ValidationSummary() 生成的 data-valmsg-summary 进行样式设置，我只想在字段验证失败时显示带有 twitter bootstrap 样式的框。我该怎么做呢？目前我的标记看起来像这样：

..
<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>

我尝试将 style="display: none" 添加到我的 div 中，但这似乎也不起作用。

4

1 回答 1

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); 
});
于 2013-10-28T17:05:17.420 回答