ASP.Net Core MVC asp-validation-summary styling

Question

How do I get rid of the bullets for each model error. Is there a style property? I don't see one in intellisence.

Answer 1

The validation summary helper will render each error message as a list item inside a ul. You can always customize it using your own CSS.

<form asp-action="Index">
    <div asp-validation-summary="All" id="myCustomSummary"></div>
    <!-- your form elements goes here-->
    <button id="btnadd">Save</button>
</form>

Here, I gave an Id attribute to the div so that I can selectively override the ul list items inside that div.

To remove the bullet from each list item, you can set the list-style-type to none in your stylesheet:

#myCustomSummary ul li {
    list-style-type: none;
}

Answer 2

The nice thing about the Tag Helpers is that they pass all non-ASP attributes directly to the rendered HTML tag without any processing. So normally, you can simply add the class list-unstyled to the class attribute if you're using Bootstrap, or add the relevant CSS to the style attribute if you're not using Bootstrap. No custom ASP attributes are required.

However, the problem with the validation summary Tag Helper is that it renders the <ul> tag inside a <div> tag, so your class or style will be applied to the <div> which is not very useful. I don't know the reason behind their decision to create the validation summary Tag Helper on a seemingly useless <div> tag instead of directly on the <ul> tag, which would've been much easier to directly style and manipulate as I mentioned above (which is the case for all other tag helpers), but having it done this way leaves us no choice but using CSS in <style> tags or style sheets.

The other answer by Shyju is fine if you want to target a specific validation summary. However, you most likely want to target all validation summaries in the same way, in which case you're better of using a class instead of ID.

If you view the source code, you will notice that the validation summary renders HTML similar to this:

<div class="validation-summary-errors">
    <ul>
        <li>The First Name field is required.</li>
        <li>The Last Name field is required.</li>
        <li>The Date Of Birth field is required.</li>
    </ul>
</div>

So you can simply target the validation-summary-errors class like this:

.validation-summary-errors ul {
    padding-left: 0;
    list-style: none;
}

This code is a copy of the Bootstrap class list-unstyled, which completely removes all list styling. If you prefer to keep the padding, then delete the first line.

Now, if you want to target all validation summaries on a specific page, then add the above CSS to that page, and if you want to target all validation summaries on all page of your website, then add the above CSS to you website's style sheet.