asp.net-mvc-3 - vacios - validar email mvc

La validación discreta de MVC en la casilla de verificación no funciona

Question

Estoy tratando de implementar el código como se menciona en esta publicación . En otras palabras, trato de implementar una validación discreta en una casilla de verificación de términos y condiciones. Si el usuario no ha seleccionado la casilla de verificación, la entrada debe marcarse como no válida.

Este es el código Validator del lado del servidor, he agregado:

/// <summary>
/// Validation attribute that demands that a boolean value must be true.
/// </summary>
[AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = false)]
public class MustBeTrueAttribute : ValidationAttribute
{
    public override bool IsValid(object value)
    {
        return value != null && value is bool && (bool)value;
    }
}

Este es el modelo

[MustBeTrue(ErrorMessage = "You must accept the terms and conditions")]
[DisplayName("Accept terms and conditions")]
public bool AcceptsTerms { get; set; }

Esta es mi opinión:

@Html.EditorFor(x => x.AcceptTermsAndConditions)
@Html.LabelFor(x => x.AcceptTermsAndConditions)
@Html.ValidationMessageFor(x => x.AcceptTermsAndConditions)

y este es el jQuery que he usado para adjuntar el lado del cliente del validador:

$.validator.unobtrusive.adapters.addBool("mustbetrue", "required");

Sin embargo, el script del lado del cliente no parece estar funcionando. Cada vez que presiono el botón de enviar, la validación en los demás campos comienza bien, pero la validación de los términos y condiciones no parece activarse. Así es como se ve el código en Firebug después de hacer clic en el botón de enviar.

<input type="checkbox" value="true" name="AcceptTermsAndConditions" id="AcceptTermsAndConditions" data-val-required="The I confirm that I am authorised to join this website and I accept the terms and conditions field is required." data-val="true" class="check-box">
<input type="hidden" value="false" name="AcceptTermsAndConditions">
<label for="AcceptTermsAndConditions">I confirm that I am authorised to join this website and I accept the terms and conditions</label>
<span data-valmsg-replace="true" data-valmsg-for="AcceptTermsAndConditions" class="field-validation-valid"></span>

¿Algunas ideas? ¿Me he perdido un paso? Esto me está llevando al baño!

Gracias de antemano S

Answer 1

No estoy seguro de por qué esto no funcionó para mí, pero opté por usar tu código y hacer algo ligeramente diferente.

En mi carga de Javascript agrego lo siguiente, esto hace que la casilla de verificación active la validación no intrusiva si, o seleccionas la casilla de verificación y la desmarcas. Además, si envía el formulario.

$(function () {
        $(".checkboxonblurenabled").change(function () {
            $(''form'').validate().element(this);
        });
});

También necesita agregar la clase CSS a su casilla de verificación, como tal.

@Html.CheckBoxFor(model => model.AgreeToPrivacyPolicy, new { @class = "checkboxonblurenabled"})

Por lo tanto, ahora tenemos que conectar el modelo y poner en clase para manejar la validación del lado del servidor (que estoy reutilizando desde arriba), pero cambiando la discreción ligeramente.

Aquí está el atributo del cliente que extiende IClientValidate como en el ejemplo anterior ...

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = false)]
public class MustBeTrueAttribute : ValidationAttribute, IClientValidatable
{
    public override bool IsValid(object value)
    {
        return value != null && value is bool && (bool)value;
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        yield return new ModelClientValidationRule
        {
            ErrorMessage = this.ErrorMessage,
            ValidationType = "mustbetrue"
        };
    }
}

En su modelo, la propiedad del objeto establece las anotaciones de los atributos deseados

 [MustBeTrue(ErrorMessage = "Confirm you have read and agree to our privacy policy")]
    [Display(Name = "Privacy policy")]
    public bool AgreeToPrivacyPolicy { get; set; }

De acuerdo, estamos listos para poner en javascript.

(function ($) {
    /*
    START CHECK MUST BE TRUE - UNOBTRUSIVE JAVASCRIPT
    START CHECK MUST BE TRUE - UNOBTRUSIVE JAVASCRIPT
    START CHECK MUST BE TRUE - UNOBTRUSIVE JAVASCRIPT
    */
    jQuery.validator.unobtrusive.adapters.add("mustbetrue", [''maxint''], function (options) {
        options.rules["mustbetrue"] = options.params;
        options.messages["mustbetrue"] = options.message;
    });

    jQuery.validator.addMethod("mustbetrue", function (value, element, params) {

        if ($(element).is('':checked'')) {
            return true;
        }
        else {
            return false;
        }
    });
    /*
    START CHECK MAX INT - UNOBTRUSIVE JAVASCRIPT
    START CHECK MAX INT - UNOBTRUSIVE JAVASCRIPT
    START CHECK MAX INT - UNOBTRUSIVE JAVASCRIPT
    */



} (jQuery));

Lo que hace que esto funcione, es ... bueno. Después de ver el marcado de HTML después de intentar hacer la respuesta sugerida anteriormente, mis valores estaban todos en verdadero, sin embargo, mi casilla marcada era falsa. Entonces, decidí dejar que jquery lo resolviera usando IsChecked

Espero que esto ayude.

Answer 2

Oledor,

Además de implementar la solución de Darin, también debe modificar el archivo jquery.validate.unobtrusive.js . En este archivo, debe agregar un método de validación "mustbetrue", de la siguiente manera:

$jQval.addMethod("mustbetrue", function (value, element, param) {
    // check if dependency is met
    if (!this.depend(param, element))
        return "dependency-mismatch";
    return element.checked;
});

Luego (olvidé agregar esto al principio), también debe agregar lo siguiente a jquery.validate.unobtrusive.js :

adapters.add("mustbetrue", function (options) {
    setValidationValues(options, "mustbetrue", true);
});

counsellorben

Answer 3

Para aquellos que ninguna de estas soluciones está funcionando:

Estoy trabajando con Razor MVC 4 usando .Net Framework 4 y los últimos archivos jquery validate script.

Después de implementar la validación de atributos personalizados en el lado del cliente y del servidor, aún no funciona. Mi formulario está siendo publicado de todos modos.

Así que aquí está el truco: la secuencia de comandos JQuery validate tiene una configuración predeterminada para ignorar las etiquetas ocultas, donde oculto está http://api.jquery.com/hidden-selector/ , que normalmente no será un problema, pero el estilo @ Html.CheckBoxFor que estoy usando está personalizado con un estilo CSS3 que cambia la pantalla a ninguno y se muestra una imagen personalizada de la casilla de verificación, por lo que nunca ejecutará la regla de validación en la casilla de verificación.

Mi solución fue agregar esta línea antes de la declaración de la regla de validación del cliente personalizado:

$.validator.defaults.ignore = "";

lo que hace es anular la configuración de ignorar para todas las validaciones en la página actual, observe que ahora también podría ejecutar validaciones en el campo oculto (un efecto secundario).

Answer 4

IClientValidatable implementar IClientValidatable en su atributo personalizado para vincular el nombre del adaptador mustbetrue que está registrando en el lado del cliente con este atributo:

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = false)]
public class MustBeTrueAttribute : ValidationAttribute, IClientValidatable
{
    public override bool IsValid(object value)
    {
        return value != null && value is bool && (bool)value;
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        yield return new ModelClientValidationRule
        {
            ErrorMessage = this.ErrorMessage,
            ValidationType = "mustbetrue"
        };
    }
}

ACTUALIZAR:

Ejemplo de trabajo completo.

Modelo:

public class MyViewModel
{
    [MustBeTrue(ErrorMessage = "You must accept the terms and conditions")]
    [DisplayName("Accept terms and conditions")]
    public bool AcceptsTerms { get; set; }
}

Controlador:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel();
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

Ver:

@model MyViewModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script type="text/javascript">
    $.validator.unobtrusive.adapters.addBool("mustbetrue", "required");
</script>

@using (Html.BeginForm())
{
    @Html.CheckBoxFor(x => x.AcceptsTerms)
    @Html.LabelFor(x => x.AcceptsTerms)
    @Html.ValidationMessageFor(x => x.AcceptsTerms)
    <input type="submit" value="OK" />
}

Answer 5

 /// <summary> 
    ///  Summary : -CheckBox for or input type check required validation is not working the root cause and solution as follows
    ///
    ///  Problem :
    ///  The key to this problem lies in interpretation of jQuery validation ''required'' rule. I digged a little and find a specific code inside a jquery.validate.unobtrusive.js file:
    ///  adapters.add("required", function (options) {
    ///  if (options.element.tagName.toUpperCase() !== "INPUT" || options.element.type.toUpperCase() !== "CHECKBOX") {
    ///    setValidationValues(options, "required", true);
    ///    }
    ///   });
    ///   
    ///  Fix: (Jquery script fix at page level added in to check box required area)
    ///  jQuery.validator.unobtrusive.adapters.add("brequired", function (options) {
    ///   if (options.element.tagName.toUpperCase() == "INPUT" && options.element.type.toUpperCase() == "CHECKBOX") {
    ///              options.rules["required"] = true;
    ///   if (options.message) {
    ///                   options.messages["required"] = options.message;
    ///                       }
    ///  Fix : (C# Code for MVC validation)
    ///  You can see it inherits from common RequiredAttribute. Moreover it implements IClientValidateable. This is to make assure that rule will be propagated to client side (jQuery validation) as well.
    ///  
    ///  Annotation example :
    ///   [BooleanRequired]
    ///   public bool iAgree { get; set'' }
    ///    

    /// </summary>


public class BooleanRequired : RequiredAttribute, IClientValidatable
{

    public BooleanRequired()
    {
    }

    public override bool IsValid(object value)
    {
        return value != null && (bool)value == true;
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        return new ModelClientValidationRule[] { new ModelClientValidationRule() { ValidationType = "brequired", ErrorMessage = this.ErrorMessage } };
    }
}

Answer 6

<script>
    $(function () {
        $(''#btnconfirm'').click(function () {
            if ($("#chk").attr(''checked'') !== undefined ){
                return true;
            }
            else {

                alert("Please Select Checkbox ");
                return false;
            }
        });

    });
</script>
<div style="float: left">
                    <input type="checkbox" name="chk" id="chk"  />
                    I read and accept the terms and Conditions of registration
                </div>
  <input type="submit" value="Confirm"  id="btnconfirm" />