CODEWITHSUNDEEP
c#validationasp.net-coreclient-sideasp.net-core-2.2
DonkeyBanana
DonkeyBanana

Reputation: 3546

Implementing simple validation on the client-side in C# ASP.NET Core 2.2

Adding simple validation on the client-side in C# ASP.NET Core 2.2

I've read MS docs on validation and decided that it's most suitable to apply client-side validation. However, in the provided example, they show something with jQuery and I was under the impression that jQuery was getting a bit old by now. Also, we're spoiled with the nice tools from MS that will automagically do stuff for us. (I thought that the span with attribute asp-validation-for and div with attribute asp-validation-summary implied that the magic would be there. It wasn't as it turns out.)

My code is as shown below.

<div class="row">
  <div class="col-md-4">
    <form asp-controller="Security"
          asp-action="Register"
          method="post">
      <div asp-validation-summary="ModelOnly" class="text-danger"></div>
      <div class="form-group">
        <label asp-for="@Model.Email" class="control-label"></label>
        <input asp-for="@Model.Email" class="form-control" />
        <span asp-validation-for="@Model.Email" class="text-danger"></span>
      </div>
      <div class="form-group">
        <label asp-for="@Model.Info" class="control-label"></label>
        <input asp-for="@Model.Info" class="form-control" />
        <span asp-validation-for="@Model.Info" class="text-danger"></span>
      </div>
      <div class="form-group">
        <input type="submit" value="Send" class="btn btn-primary" />
      </div>
    </form>
  </div>
</div>

I'd like to know what I'm missing to make the validation work properly (i.e. getting an error message if not both fields are filled upon submission of the form as well as the form submitting being cancelled). Alternatively, of it's something fairly basic I'm missing, I'd like to get a hint on appropriate search words. Please note that I'm only looking for the visuals: client-side messages, no relation to the back-end handler of the input.

I've seen some questions on the subject but since those seem not to have a resolution approved, I feel that it's best to ask in order to do things the right way instead of a guessing game.

Upvotes: 1

Views: 1787

Answers (1)

Ryan
Ryan

Reputation: 20106

You need to add reference to validation file. Check whether you have _ValidationScriptsPartial.cshtml in your Views/Shared folder.

<environment include="Development">
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.min.js"
        asp-fallback-src="~/Identity/lib/jquery-validation/dist/jquery.validate.min.js"
        asp-fallback-test="window.jQuery && window.jQuery.validator"
        crossorigin="anonymous"
        integrity="sha384-rZfj/ogBloos6wzLGpPkkOr/gpkBNLZ6b6yLy4o+ok+t/SAKlL5mvXLr0OXNi1Hp">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.9/jquery.validate.unobtrusive.min.js"
        asp-fallback-src="~/Identity/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"
        asp-fallback-test="window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive"
        crossorigin="anonymous"
        integrity="sha384-ifv0TYDWxBHzvAk2Z0n8R434FL1Rlv/Av18DXE43N/1rvHyOG4izKst0f2iSLdds">
</script>
</environment>

Add below code in view,

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

Upvotes: 2

Related Questions