How can I put red border around input without JS? - asp.net-core

Question

<span asp-validation-for="Password" class="text-danger"></span>
<div class="form-group">
<label asp-for="Password">პაროლი</label>
#Html.TextBoxFor(x => x.Password, new { type = "password",#class = "form-control" })
<!--
<input asp-for="Password" class="form-control" />
-->
</div>
This is Sample input. I am doing Server-side validation only. How can I make input field border red when user input is not validated?

Answer 1

Model Validation feature adds the CSS Class input-validation-error to all the controls that have failed the validation checks .
Here is a example you could refer to :
1.Model
public class User
{
public int Id { get; set; }
[Required]
public string Name { get; set; }
[StringLength(8, ErrorMessage = "{0} length must be between {2} and {1}.", MinimumLength = 6)]
public string Password { get; set; }
}
2.View
<style type="text/css">
.input-validation-error {
border-color: yellowgreen;
}
</style>
<div class="row">
<div class="col-md-4">
<form asp-action="Create" class="myForm">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Password">პაროლი</label>
<input asp-for="Password" type="password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
#section Scripts
{
#{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}
Result :
Reference : https://www.yogihosting.com/aspnet-core-model-validation/