twitter-bootstrap
Validación Bootstrap
Buscar..
Observaciones
Esta técnica de validación solo se puede utilizar en entradas que están dentro de un formulario.
Las propiedades deben tener al menos un requisito de validación para mostrar el resaltado en una validación
onSubmit()fallida. Los tipos de datos (aparte de la cadena) tienen un requisito de tipo de datos oculto, por lo que no requieren una anotación de datos explícita. Las cadenas no tienen esto, por lo que para forzar una verificación de validación junto con los otros campos, agregue la anotación de datos[MinLengthAttribute(0)].
Uso de ASP.NET MVC y anotaciones de datos
Agregue lo siguiente a Web.config (en la carpeta Vistas), dentro de <appSettings> :
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
Agregue el paquete jqueryval a BundleConfig.cs:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jqueryval/jquery.validate*"));
Agregue lo siguiente a todas las páginas que necesitan validación (o _Layout.cshml):
<!-- Reference to the jqueryval bundle -->
@Scripts.Render("~/bundles/jqueryval")
<!-- jQuery to apply bootstrap validation classes and glyphicons to inputs -->
<script type="text/javascript">
$.validator.setDefaults({
highlight: function (element) {
$(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback'); // red highlighting
$(element).closest('.form-group').find('.form-control-feedback').removeClass('glyphicon-ok').addClass('glyphicon-remove'); // red cross glyphicon
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback'); // green highlighting
$(element).closest('.form-group').find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok'); // green tick glyphicon
}
});
</script>
Agregue anotaciones de datos a los campos relevantes en el modelo:
using System.ComponentModel.DataAnnotations;
[Required(ErrorMessage = "This field is required.")
En la vista, agregue lo siguiente a cada entrada que necesite validación:
<!-- Validation messages -->
<div class="text-danger">@Html.ValidationMessageFor(m => m.SomeField)</div>
<!-- Bootstrap feedback span: -->
<span class="glyphicon form-control-feedback"></span>
Agregue lo siguiente a la acción del controlador relevante para agregar la validación del lado del servidor:
if (!ModelState.IsValid)
{
return View(model);
}
else
{
// continue with action
}
Ejemplo de entrada que requiere validación
Modelo:
[Required(ErrorMessage = "This field is required.")
[StringLength(maximumLength: 10, ErrorMessage = "This field must be 10 characters or less.")]
public string SomeRequiredField { get; set; }
Ver:
<div class="form-group has-feedback">
<div class="col-md-4">
@Html.LabelFor(m => m.SomeRequiredField, new { @class = "control-label" })
</div>
<div class="col-md-8">
@Html.TextBoxFor(m => m.SomeRequiredField, new { @class = "form-control" })
<div class="text-danger">@Html.ValidationMessageFor(m => m.SomeRequiredField)</div>
<span class="glyphicon form-control-feedback"></span>
</div>
</div>
Opcional
Agregue el siguiente jQuery para validar las entradas en el desenfoque, así como en el envío:
$('input').on('blur', function () {
$(this).valid();
});