ASP.NET Core form tag helpers emit `data-val*` attributes on input elements to describe validation constraints. `data-val="true"` marks an element for client-side validation; an attribute such as `data-val-required` supplies a rule and its error message. section 29.6 section 27.4.1
A generated ProductId input
In `Views/Form/Form.cshtml`, `<input asp-for="ProductId" />` generates a numeric input for a C# `long` property. Its rendered attributes include `data-val="true"` and `data-val-required="The ProductId field is required."` The `type="number"` hint is not a substitute for model validation: browsers differ in how they enforce input types. section 27.4.1
...
<div class="form-group">
<label>Id</label>
<input class="form-control" type="number" data-val="true"
data-val-required="The ProductId field is required."
id="ProductId" name="ProductId" value="1">
</div>
...
Inspect the rendered input to see the validation metadata alongside its generated `type`, `id`, and `name` attributes. section 27.4.1
To use the metadata in the browser, install jQuery Validate and jQuery Validation Unobtrusive, then load jQuery, jQuery Validate, and the unobtrusive script in that order. The unobtrusive code finds `data-val` elements when the form is submitted. If validation fails, it displays an error and stops submission before an HTTP request is sent. Check the browser’s F12 tools while submitting an invalid form to verify that no request occurs. section 29.6
Listing 29.24 Adding elements in the _Validation.cshtml file in the Views/Shared folder
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("input.input-validation-error")
.forEach((elem) => { elem.classList.add("is-invalid"); }
);
});
</script>
<script src="/lib/jquery/jquery.min.js"></script>
<script src="/lib/jquery-validate/jquery.validate.min.js"></script>
<script src=
"/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js">
</script>
Use the `_Validation.cshtml` listing for the script paths and required load order. section 29.6
