Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Quick & dirty but very simple ASP.NET MVC Partial that allows you to use the MVC/Razor validation attributes on your models, but have the classes on those models work with Bootstrap 4's validation styles.
<script>
let errorElements = Array.from(document.getElementsByClassName("input-validation-error"));
errorElements.forEach(element => {
let inputElement = $(element);
let messageDiv = inputElement.next("div");
if (messageDiv) {
messageDiv.text(inputElement.data("val-required"));
}
inputElement.addClass("is-invalid");
});
</script>
Create your "Pages/Shared/_Layout.cshtml" as usual with your template markup in, make sure you add css/script
tags for Bootstrap 4 and any dependencies it needs.
Something along the lines of:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"]</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
@RenderSection("Scripts", required: false)
</body>
</html>
It's important that you include the render section for scripts as that's where the partial will be injected.
Copy the file "_BS4Validation.cshtml" above and place it in the same folder as your "_Layout.cshtml" file.
Code your pages up as normal, and create your view models as normal C# classes, making sure you add the various
attributes (EG: [Required], [MaxLen] etc...) and such like that you need on the properties of those models.
In any pages where you want the Bootstrap styles to appear on your forms after validation has run:
Code up your forms in the following manner
<form method="post">
<div class="form-group">
<label asp-for="UserAuth.UserName"></label>
<input asp-for="UserAuth.UserName" type="text" class="form-control">
<div class="invalid-feedback"></div>
</div>
<div class="form-group">
<label asp-for="UserAuth.Password"></label>
<input asp-for="UserAuth.Password" class="form-control">
<div class="invalid-feedback"></div>
</div>
<button type="submit" class="btn btn-success">Test</button>&nbsp;
<a asp-page="Index" class="btn btn-danger">Cancel</a>
</form>
The "invalid-feedback" divs are where the error messages will be inserted, and MUST follow the input
that is being validated, this is the standard way the BS4 expects you to code up and style a form using
it's CSS classes.
At the foot of the page with the form in add the following:
@section Scripts
{
<partial name="_BS4Validation" />
}
Now when you submit a form and do the whole "if(!Model.isValid)...." thing, when your page re-renders the
code in the partial will add the appropriate BS4 classes where needed to highlight the errored inputs, and it
will automatically copy the message text added by ASP.NET to the input, into the div following and make it visible.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.