NET Core

Validaciones en ASP.NET Core y Bootstrap

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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *