How to display validation error summary at top in MVC5 with bootstrap?

Question

I am trying to show the validation error summary at top and want to give some style but unfortunately when i am trying to click on form submit button, It displays the errors but with each control rather than at top.

I want to decorate the built-in validation summary rather than creating my own JavaScript validation functions.

What i am trying to do is, please see my code.

        $(document).ready(function () {

        });

        function submitForm() {
            if ($("#frmR").valid()) {
                var form = $("#frmR").serialize();
                $.post("/Portal/Registration/RegisterP", form, function (msg) {

                });
            }
      }

    function Shift() {
        window.history.back();
        return false;
    }

input[type="checkbox"], input[type="radio"] {
    padding: 0;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    background-color: #edf8f7;
    /* background-image: none; */
    border: 1px solid #8dc6cd;
    border-radius: 0px;
}

input[type=checkbox], input[type=radio] {
    margin: 4px 0 0;
    margin-top: 1px\9;
    line-height: normal;
}

input[type=checkbox], input[type=radio] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

input {
    line-height: normal;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input[type="radio" i] {
    margin: 3px 3px 0px 5px;
}

input[type="radio" i] {
    -webkit-appearance: radio;
    box-sizing: border-box;
}

input[type="radio" i], input[type="checkbox" i] {
    background-color: initial;
    margin: 3px 0.5ex;
    padding: initial;
    border: initial;
}

input {
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    user-select: text;
    cursor: auto;
    padding: 1px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}

input, textarea, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 13.3333px Arial;
}

input, textarea, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb;
}
label {
    display: inline-block;
    margin-bottom: 5px;
    /* font-weight: bold; */
    color: #6b7b8a;
    font-size: 18px;
    font-weight: bold;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}
body {
    background: #fff;
    font-family: 'Roboto', sans-serif;
    color: #54667a;
    line-height: 22px;
}

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}
label>input[type="radio"]{
  vertical-align: -30%;
}

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" > </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js" > </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js" > </script>
</head>
<body>
<form  id="frmR" action="#" method="post">    
                     <div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div>
                     <div class="col-xs-6 remove-padding">
                         <h4>Patient's Appointment Type</h4>
                     </div>
                     <div class="col-xs-6">
                         <button type="submit" id="register-submit-btn" onclick="submitForm(); return false;" class="btn-primarySmall pull-right">
                             Register
                         </button>
                    </div>
                         <div class="row">
                             <div class="col-xs-12">
                                 <div class="col-xs-12">
                                     <div>
                                         <label class="">Type</label>
                                         <label><input type="radio" name="Type" checked="" value="Walk-In">Walk-In</label>
                                         <label><input type="radio" name="Type" value="Telephonic">Telephonic</label>
                                     </div>
                                 </div>
                                 <div class="col-xs-12 remove-padding">
                                     <hr />
                                     <h4>Patient's Personal Information</h4>
                                     <hr />
                                 </div>

                                 <div class="col-xs-4">
                                     <div class="form-group">
                                         <label>First Name<span style="color:#FF0000">*</span></label>
                                         <input class="form-control" type="text" placeholder="First Name" name="vFirstName" id="vFirstName" required="required" />
                                     </div>
                                 </div>
                            </div>
                        </div>
</form>
</body>
</html>

Please don't edit to incorporate the code from the solution into your question. It's pointless and the answer below no longer makes sense if the correct code is already built into the question. Rolled it back. You also wouldn't put .validate() inside of the submit function... it's used to initialize the plugin on page load and would not get called every time the button is clicked. — Sparky
– Sparky, Commented Jul 5, 2017 at 19:24

Bharatsing Parmar · Accepted Answer · 2017-07-01 11:18:07Z

1

You can try errorPlacement funtion of jQuery Validation to decorate and display all errors at top:

You need to add bellow html above form

<ul class="errorList"></ul>

jQuery:

$("#frmR").validate({
    errorPlacement: function(error, element) {
        element = element.closest('li');
        element = element.children(':first-child');
        error.insertBefore(element);
        error.addClass('message');
        $(function() {                                 // my function
            var errorIndex = $(error).index('div');
            var errorId = 'errordiv' + errorIndex.toString();
            $(error).attr('id', errorId);
            $('.errorList').append('<li><a href="#' + errorId + '">' + $(error).text() + '</a></li>');
        });    
    }
});

edited Jul 1, 2017 at 11:18

answered Jul 1, 2017 at 10:22

Bharatsing Parmar

2,4551 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user6306245 Over a year ago

Thank you Bharatsing. Am i doing in the correct way. i used these line of code in ready event. var validator = $('form').data('validator'); validator.settings.errorPlacement = function (error, element) { // your line of code }); }; but it throwing an error . Uncaught TypeError: Cannot read property 'settings' of undefined

Bharatsing Parmar Over a year ago

I have edited my answer. you need to add function in $("#frmR").validate(); function

user6306245 Over a year ago

thank you. now see in above post, it is working. thank you

Sparky Over a year ago

What a roundabout way. @user6306245, you can simply use the errorLabelContainer option which automatically takes care of all this. jqueryvalidation.org/validate/#errorlabelcontainer

Collectives™ on Stack Overflow

How to display validation error summary at top in MVC5 with bootstrap?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related