shawty · November 6, 2019 19:29
diff --git a/_BS4Validation.cshtml b/_BS4Validation.cshtml
 <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>
diff --git a/instructions b/instructions
 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.
	<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>
	<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.