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>

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 に答える