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

前端 未结 12 1623
星月不相逢
星月不相逢 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:34

    The following worked for me:

    $(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");
            }
        });
    }();
    

    Taken from http://www.benripley.com/development/javascript/asp-mvc-4-validation-with-bootstrap-3.

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

    A nice way of handling this if you're using Bootstrap 2 is...

    Add this to your _Layout.cshtml:

    <script type="text/javascript">
    
    jQuery.validator.setDefaults({
        highlight: function (element, errorClass, validClass) {
            if (element.type === 'radio') {
                this.findByName(element.name).addClass(errorClass).removeClass(validClass);
            } else {
                $(element).addClass(errorClass).removeClass(validClass);
                $(element).closest('.control-group').removeClass('success').addClass('error');
            }
        },
        unhighlight: function (element, errorClass, validClass) {
            if (element.type === 'radio') {
                this.findByName(element.name).removeClass(errorClass).addClass(validClass);
            } else {
                $(element).removeClass(errorClass).addClass(validClass);
                $(element).closest('.control-group').removeClass('error').addClass('success');
            }
        }
    });
    
    $(function () {
    
        $("span.field-validation-valid, span.field-validation-error").addClass('help-inline');
        $("div.control-group").has("span.field-validation-error").addClass('error');
        $("div.validation-summary-errors").has("li:visible").addClass("alert alert-block alert-error");
    
    });
    
    </script>
    

    These are the posts where I found the code pieces above:

    Integrating Bootstrap Error styling with MVC’s Unobtrusive Error Validation

    Twitter Bootstrap validation styles with ASP.NET MVC

    MVC Twitter Bootstrap unobtrusive error handling


    UPDATE

    Right now I needed to do the same when using Bootstrap 3. Here's the modifications necessary since the class names changed:

    <script type="text/javascript">
    
        jQuery.validator.setDefaults({
            highlight: function (element, errorClass, validClass)
            {
                if (element.type === 'radio')
                {
                    this.findByName(element.name).addClass(errorClass).removeClass(validClass);
                } else
                {
                    $(element).addClass(errorClass).removeClass(validClass);
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
                }
            },
            unhighlight: function (element, errorClass, validClass)
            {
                if (element.type === 'radio')
                {
                    this.findByName(element.name).removeClass(errorClass).addClass(validClass);
                } else
                {
                    $(element).removeClass(errorClass).addClass(validClass);
                    $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
                }
            }
        });
    
    $(function () {
    
        $("span.field-validation-valid, span.field-validation-error").addClass('help-block');
        $("div.form-group").has("span.field-validation-error").addClass('has-error');
        $("div.validation-summary-errors").has("li:visible").addClass("alert alert-block alert-danger");
    
    });
    
    </script>
    
    0 讨论(0)
  • 2021-01-30 01:36

    Why not just use css !important and call it a day:

    /* Styles for validation helpers
    -----------------------------------------------------------*/
    .field-validation-error {
        color: #f00 !important;
    }
    
    .field-validation-valid {
        display: none;
    }
    
    .input-validation-error {
        border: 1px solid #f00 !important;
        background-color: #fee !important;
    }
    
    .validation-summary-errors {
        font-weight: bold;
        color: #f00;
    }
    
    .validation-summary-valid {
        display: none;
    }
    
    0 讨论(0)
  • 2021-01-30 01:41

    This is a neat solution that gives you more control over how the ValidationSummary renders errors to the view. The Unordered List it produced did not look right inside the alert. Therefore, I simply looped through the errors and rendered them how I wanted - using paragraphs in this case. For example:

    @if (ViewData.ModelState.Any(x => x.Value.Errors.Any()))
    {
        <div class="alert alert-danger" role="alert">
            <a class="close" data-dismiss="alert">×</a>
            @foreach (var modelError in Html.ViewData.ModelState.SelectMany(keyValuePair => keyValuePair.Value.Errors))
            {
                <p>@modelError.ErrorMessage</p>
            }
        </div>
    }
    

    Which results in a neat Validation Summary Alert:

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

    For the ValidationSummary, you can use the overload that allows you to specify htmlAttributes. This allows you to set it to use the Twitter Bootstrap alert css styles.

    @Html.ValidationSummary(string.Empty, new { @class = "alert alert-danger" })
    

    A similar overload exists for the ValidationMessage and ValidationMessageFor helper methods.

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

    On Bootstrap 3 you have to add:

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

    you'll see something like that:

    Validation errors demo

    0 讨论(0)
提交回复
热议问题