Apply Twitter Bootstrap Validation Style and Message to ASP.NET MVC validation

前端 未结 12 1625
星月不相逢
星月不相逢 2021-01-30 00:57

How can I integrate ASP.NET MVC unobtrusive validation and Twitter Bootstrap? I want to have all those validation messages and styles appropria

相关标签:
12条回答
  • 2021-01-30 01:46

    You can add a few classes to your Site.css file:

    /* styles for validation helpers */
    .field-validation-error {
        color: #b94a48;
    }
    
    .field-validation-valid {
        display: none;
    }
    
    input.input-validation-error {
        border: 1px solid #b94a48;
    }
    
    select.input-validation-error {
        border: 1px solid #b94a48;
    }
    
    input[type="checkbox"].input-validation-error {
        border: 0 none;
    }
    
    .validation-summary-errors {
        color: #b94a48;
    }
    
    .validation-summary-valid {
        display: none;
    }
    

    FYI: http://weblogs.asp.net/jdanforth/form-validation-formatting-in-asp-net-mvc-5-and-bootstrap-3

    0 讨论(0)
  • 2021-01-30 01:48

    I suggest to include Bootstrapper in less format and do the same thing as Iridio suggested but in .less. That way you could have something like:

    .validation-summary-errors
    {
        .alert();
        .alert-error();
    }
    .field-validation-error 
    {
        .label();
        .label-important();
    }
    

    so when bootstrapper will change you'll pick up the changes automatically. Regular styles that handle visibility from MVC default Site.css will stay in place and handle visibility.

    0 讨论(0)
  • 2021-01-30 01:49

    This will convert ValidationSummary() to a boostrap alert. You can include a little script to remove unnecessary classes and give a highlight to fields with problems.

    @if (ViewData.ModelState.Any(x => x.Value.Errors.Any())) {
       <div class="alert alert-danger">
          <a href="#" class="close" data-dismiss="alert">&times;</a>
          <h4>Validation Errors</h4>
          @Html.ValidationSummary()
       </div>
    }
    
    <script>
    $(".validation-summary-errors").removeClass("validation-summary-errors");
    $(".input-validation-error").removeClass("input-validation-error").parent().addClass("has-error");
    </script>
    

    See more information at http://chadkuehn.com/convert-razor-validation-summary-into-bootstrap-alert/

    0 讨论(0)
  • 2021-01-30 01:53

    For those using Bootstrap 3, the css classes have changed and the solutions above need modifications to work with Bootstrap 3. I have used the following with success with MVC 4 and Bootstrap 3. See this SO thread for more:

    $(function () {
     // any validation summary items should be encapsulated by a class alert and alert-danger
        $('.validation-summary-errors').each(function () {
            $(this).addClass('alert');
            $(this).addClass('alert-danger');
        });
    
        // update validation fields on submission of form
        $('form').submit(function () {
            if ($(this).valid()) {
                $(this).find('div.control-group').each(function () {
                    if ($(this).find('span.field-validation-error').length == 0) {
                        $(this).removeClass('has-error');
                        $(this).addClass('has-success');
                    }
                });
            }
            else {
                $(this).find('div.control-group').each(function () {
                    if ($(this).find('span.field-validation-error').length > 0) {
                        $(this).removeClass('has-success');
                        $(this).addClass('has-error');
                    }
                });
                $('.validation-summary-errors').each(function () {
                    if ($(this).hasClass('alert-danger') == false) {
                        $(this).addClass('alert');
                        $(this).addClass('alert-danger');
                    }
                });
            }
        });
    
        // check each form-group for errors on ready
        $('form').each(function () {
            $(this).find('div.form-group').each(function () {
                if ($(this).find('span.field-validation-error').length > 0) {
                    $(this).addClass('has-error');
                }
            });
        });
    });
    
    var page = function () {
        //Update the validator
        $.validator.setDefaults({
            highlight: function (element) {
                $(element).closest(".form-group").addClass("has-error");
                $(element).closest(".form-group").removeClass("has-success");
            },
            unhighlight: function (element) {
                $(element).closest(".form-group").removeClass("has-error");
                $(element).closest(".form-group").addClass("has-success");
            }
        });
    }();
    
    0 讨论(0)
  • 2021-01-30 01:55

    You can integrate MVC3 validation with Bootstrap framework by adding the following javascript to your page (View)

    <script>
    $(document).ready(function () {
    /* Bootstrap Fix */
    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest("div.control-group").addClass("error");
        },
        unhighlight: function (element) {
            $(element).closest("div.control-group").removeClass("error");
        }
    });
    var current_div;
    $(".editor-label, .editor-field").each(function () {
        var $this = $(this);
        if ($this.hasClass("editor-label")) {
            current_div = $('<div class="control-group"></div>').insertBefore(this);
        }
        current_div.append(this);
    });
    $(".editor-label").each(function () {
        $(this).contents().unwrap();
    });
    $(".editor-field").each(function () {
        $(this).addClass("controls");
        $(this).removeClass("editor-field");
    });
    $("label").each(function () {
        $(this).addClass("control-label");
    });
    $("span.field-validation-valid, span.field-validation-error").each(function () {
        $(this).addClass("help-inline");
    });
    $("form").each(function () {
        $(this).addClass("form-horizontal");
        $(this).find("div.control-group").each(function () {
            if ($(this).find("span.field-validation-error").length > 0) {
                $(this).addClass("error");
            }
        });
    });
    });
    </script>
    

    Besides, on the Views (for example "Create.cshtml") make sure that the fields in the form are formatted as the following...

        <div class="editor-label">
            @Html.LabelFor(Function(model) model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(Function(model) model.Name)
            @Html.ValidationMessageFor(Function(model) model.Name)
        </div>
    
    0 讨论(0)
  • 2021-01-30 01:57

    Copy the css of the validators in your css file and change the color accordinlgly. Something like this should do

    .field-validation-error {
        color: #b94a48;
        display: inline-block;
        *display: inline;
        padding-left: 5px;
        vertical-align: middle;
        *zoom: 1;
    }
    
    .field-validation-valid {
        display: none;
    }
    
    .input-validation-error {
        /*
        border: 1px solid #ff0000;
        background-color: #ffeeee;
        */
        color: #b94a48;
        border-color: #b94a48;
    }
    
    .input-validation-error:focus {
      border-color: #953b39;
      -webkit-box-shadow: 0 0 6px #d59392;
      -moz-box-shadow: 0 0 6px #d59392;
      box-shadow: 0 0 6px #d59392;
    }
    
    .validation-summary-errors {
        /*font-weight: bold;*/
        color: #b94a48;
    }
    
    .validation-summary-valid {
        display: none;
    }
    
    0 讨论(0)
提交回复
热议问题