I can't make client side validation working on an ASP.NET application - asp.net-mvc

Question

my issue
I try to create a custom validator with client validation.
But client validation side doesn't work, I can't understand why.
This is a .NET Core 3.1 application.
my code
The validator:
public class ExcludeCharAttribute : ValidationAttribute, IClientValidatable
{
private readonly string _chars;
public ExcludeCharAttribute(string chars)
: base("{0} contains invalid character.")
{
_chars = chars;
}
protected override ValidationResult IsValid(object value, ValidationContext validationContext)
{
if (value != null)
{
var valueAsString = value.ToString();
for (int i = 0; i < _chars.Length; i++)
{
if (valueAsString.Contains(_chars[i]))
{
var errorMessage = FormatErrorMessage(validationContext.DisplayName);
return new ValidationResult(errorMessage);
}
}
}
return ValidationResult.Success;
}
//new method
public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
var rule = new ModelClientValidationRule();
rule.ErrorMessage = FormatErrorMessage(metadata.GetDisplayName());
rule.ValidationParameters.Add("chars", _chars);
rule.ValidationType = "exclude";
yield return rule;
}
}
For testing I created this test dto:
public class TestDto
{
[ExcludeChar("123456")]
public string Prop1 { get; set; }
[Required]
public string Prop2 { get; set; }
}
and that form:
<div class="row">
<div class="col-md-4">
<form asp-action="TestValidator">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Prop1" class="control-label"></label>
<input asp-for="Prop1" class="form-control" />
<span asp-validation-for="Prop1" class="text-danger"></span>
<label asp-for="Prop2" class="control-label"></label>
<input asp-for="Prop2" class="form-control" />
<span asp-validation-for="Prop2" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
#section Scripts {
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script src="~/js/validator.js"></script>
}
And of course this validation js (validator.js):
$.validator.unobtrusive.adapters.addSingleVal("exclude", "chars");
$.validator.addMethod("exclude", function (value, element, exclude) {
if (value) {
for (var i = 0; i < exclude.length; i++) {
if (jQuery.inArray(exclude[i], value) != -1) {
return false;
}
}
}
return true;
});
What happen
When testing no client validation is run.
When inspecting code I don't see any data-* attributes for Prop1:
But it's OK for Prop2.
I think this is why it does not work.
What I tested
Tested other online samples.
Tested I loaded all the JS:
Tested CDN version of the scripts
What I need
Now I have no idea what to do. Does anybody have an ideau about what is lacking?
thank you

Answer 1

I copied your custom validation code and test in my side but it worked well, could you pls check the differences between your code and mine? I'm sure the view code is the same, and in validation class you may check the using packages.
validation class:
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
namespace WebAppMvc.Models
{
public class ExcludeCharAttribute : ValidationAttribute, IClientValidatable
{
private readonly string _chars;
public ExcludeCharAttribute(string chars)
: base("{0} contains invalid character.")
{
_chars = chars;
}
protected override ValidationResult IsValid(object value, ValidationContext validationContext)
{
if (value != null)
{
var valueAsString = value.ToString();
for (int i = 0; i < _chars.Length; i++)
{
if (valueAsString.Contains(_chars[i]))
{
var errorMessage = FormatErrorMessage(validationContext.DisplayName);
return new ValidationResult(errorMessage);
}
}
}
return ValidationResult.Success;
}
//new method
public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
var rule = new ModelClientValidationRule();
rule.ErrorMessage = FormatErrorMessage(metadata.GetDisplayName());
rule.ValidationParameters.Add("chars", _chars);
rule.ValidationType = "exclude";
yield return rule;
}
}
}
Model:
using System.ComponentModel.DataAnnotations;
namespace WebAppMvc.Models
{
public class UserModel
{
[Key]
[ExcludeChar("123456")]
public string id { get; set; }
public int userId { get; set; }
}
}
And this is my controller method:
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Create([Bind("id,userId")] UserModel user)
{
if (ModelState.IsValid)
{
return RedirectToAction("Index");
}
return View(user);
}
This is the view:
#model WebAppMvc.Models.UserModel
<h4>Test</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="id" class="control-label"></label>
<input asp-for="id" class="form-control" />
<span asp-validation-for="id" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="userId" class="control-label"></label>
<input asp-for="userId" class="form-control" />
<span asp-validation-for="userId" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>