En este artículo veremos como realizar validaciones en ASP.NET Core y Bootstrap para conseguir algo de este estilo:
En primer lugar añadiremos los tags necesarios en nuestro ViewModel que controlen esas validaciones.
public class CreateViewModel
{
public Guid Id { get; set; }
[MaxLength(5)]
[Required]
public string Codigo { get; set; }
[MaxLength(50)]
[Required]
public string Nombre { get; set; }
}En este caso utilizaremos los tags [Required] y [MaxLenght] aunque tu puedes usar los que necesites.
Tras esto, en nuestra vista añadiremos los campos código y nombre. La etiqueta asp-validation-for será la que se remplace por el mensaje de error.
<div class="row">
<div class="col">
<div class="form-group">
<label for="Codigo">Código <span class="text-danger">*</span> <span asp-validation-for="Codigo" class="text-danger text-small"></span></label>
<input type="text" id="Codigo" asp-for="Codigo" class="form-control" placeholder="Código identificativo">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="Nombre">Nombre <span class="text-danger">*</span> <span asp-validation-for="Nombre" class="text-danger text-small"></span></label>
<input type="text" id="Nombre" asp-for="Nombre" class="form-control" placeholder="Nombre del proyecto">
</div>
</div>
</div>Para que los mensajes funcionen correctamente estableceremos el mismo texto para el atributo name y el atributo id.
También añadiremos la vista parcial que añade las librerías de validación jQuery.
@section scripts
{
<partial name="_ValidationScriptsPartial" />
}Esta vista parcial se encuentra en /Views/Shared.
Por último modificaremos esta vista y añadiremos el siguiente fragmento que se encargará de colorear el borde de los controles erróneos.
<script>
var settings = {
validClass: "is-valid",
errorClass: "is-invalid"
};
$.validator.setDefaults(settings);
$.validator.unobtrusive.options = settings;
</script>Con todo esto ya deberías tener funcionando las validaciones de los controles correctamente.