I'm trying to write some client side validation for my program and have been following several guides, including Microsofts. But the validation just refuses to work and I'm all out of ideas !

The property I've been trying to validate in my viewmodel, I've tried with less complex restrictions but that didn't change anything

[BindProperty,Required(ErrorMessage = "Enter a first name"),StringLength(60,MinimumLength = 3),RegularExpression(@"^[A-Z]+[a-zA-Z\s]*$")]
public required string FirstName { get; set; }

the code in my form where I try to validate

<div class="col-sm-6">
    <label for="firstName" class="form-label">First name</label>
    <input type="text" class="form-control" value="@Model.FirstName" asp-for="FirstName">
    <span asp-validation-for="FirstName" class="invalid-feedback"></span>
</div>

I've included <partial name="_ValidationScriptsPartial" /> in my scripts

when I check the html code it shows that everything's built correctly

<input type="text" class="form-control valid" value="Albus" data-val="true" data-val-length="The field FirstName must be a string with a minimum length of 3 and a maximum length of 60." data-val-length-max="60" data-val-length-min="3" data-val-regex="The field FirstName must match the regular expression '^[A-Z]+[a-zA-Z\s]*$'." data-val-regex-pattern="^[A-Z]+[a-zA-Z\s]*$" data-val-required="Enter a first name" id="FirstName" maxlength="60" name="FirstName" aria-describedby="FirstName-error" aria-invalid="false">
<span class="invalid-feedback field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>

yet it refuses to show any validation message

I'm trying to write some client side validation for my program and have been following several guides, including Microsofts. But the validation just refuses to work and I'm all out of ideas !

The property I've been trying to validate in my viewmodel, I've tried with less complex restrictions but that didn't change anything

[BindProperty,Required(ErrorMessage = "Enter a first name"),StringLength(60,MinimumLength = 3),RegularExpression(@"^[A-Z]+[a-zA-Z\s]*$")]
public required string FirstName { get; set; }

the code in my form where I try to validate

<div class="col-sm-6">
    <label for="firstName" class="form-label">First name</label>
    <input type="text" class="form-control" value="@Model.FirstName" asp-for="FirstName">
    <span asp-validation-for="FirstName" class="invalid-feedback"></span>
</div>

I've included <partial name="_ValidationScriptsPartial" /> in my scripts

when I check the html code it shows that everything's built correctly

<input type="text" class="form-control valid" value="Albus" data-val="true" data-val-length="The field FirstName must be a string with a minimum length of 3 and a maximum length of 60." data-val-length-max="60" data-val-length-min="3" data-val-regex="The field FirstName must match the regular expression '^[A-Z]+[a-zA-Z\s]*$'." data-val-regex-pattern="^[A-Z]+[a-zA-Z\s]*$" data-val-required="Enter a first name" id="FirstName" maxlength="60" name="FirstName" aria-describedby="FirstName-error" aria-invalid="false">
<span class="invalid-feedback field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>

yet it refuses to show any validation message

• asp-mvc
• asp-core
• validation
• razor

1 Answer 1

A minimal example:

<form method="post">
    <div class="col-sm-6">

        <div class="form-group">
            <label asp-for="FirstName" class="control-label"></label>
            <input asp-for="FirstName" class="form-control" />
            <span asp-validation-for="FirstName" class="text-danger"></span>
        </div>
    </div>
    <button type="submit">Submit</button>
</form>

<script src="/lib/jquery/dist/jquery.min.js"></script>
<partial name="_ValidationScriptsPartial" />

It works on myside:

For more details,you could read this document