twitter-bootstrap
Validación Bootstrap

Angular 2 AngularJS ASP.NET asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails
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();
});


Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow