This post is about using Bootstrap 4 style validation in ASP.NET Core. By default ASP.NET Core validation messages will be displayed in the bottom of the invalid control. And even if we are using bootstrap, the validation styles won’t be applied. In this post I will explain how to configure Bootstrap validation styles to ASP.NET Core.
Following screenshot of an ASP.NET MVC Core application without bootstrap styles.
Here is the Razor code.
And here is the model class.
We can customize the colour and font size of the error message, for that you need to create a style class -
field-validation-error. ASP.NET MVC Core used to add this class for the
SPAN element. So if we add an style class like this, it will display the error message red colour.
Now if we run the application, it will display the error message in red colour with smaller font. Bootstrap supports styling validation controls with the help of server side code implementation. From Bootstrap documentation.
We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with .is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes.
Since ASP.NET Core MVC is using JQuery validation with unobtrusive script for data annotations validation, we can customize the validator object and configure the
errorClass properties, like this.
You can place the above code snippet in the
_ValidationScriptsPartial.cshtml file. And now if you run your application, you will be able to see the Bootstrap validation style messages.
This way you can customize the ASP.NET Core MVC validation display using JQuery validation control configuration.
Happy Programming :)