Validación en cliente de campos ocultos en ASP.NET MVC

En formularios ASP.NET MVC, por defecto los campos ocultos no son validados en cliente. Es decir, aunque estos campos hayan sido generados usando los helpers e incluyan atributos con las restricciones, no serán tenidos en cuenta por jQuery validate a la hora de validar los datos del formulario antes de enviarlos al servidor.

Así, si tenemos una clase del Modelo con una propiedad como la siguiente:

[Required(ErrorMessage="Required")]
[StringLength(3, ErrorMessage="Max. {1} chars")]
public string Name { get; set; }

e introducimos en la vista un código tal que este:

1	`@Html.HiddenFor(model => model.Name)`

El resultado enviado al cliente será:

<input type="hidden"
       id="Name" name="Name" value=""
       data-val="true"
       data-val-length="Max. 3 chars" data-val-length-max="3"
       data-val-required="Required"/>

Y, como comentaba anteriormente, a pesar de que el tag <input> contiene todos los atributos, este campo no será validado.

Tampoco lo será si el campo no es visible porque se haya ocultado mediante CSS, ya sea él mismo o alguno de sus padres en el DOM. En el siguiente ejemplo, el cuadro de texto para la propiedad Name tampoco será validado en cliente:

<div style='display: none'>
   ...
   @Html.TextBoxFor(model=>model.Name)
</div>

Este comportamiento, aunque puede parecer bastante lógico, a veces se interpone en nuestro camino, por ejemplo cuando usamos un campo hidden para almacenar valores obtenidos desde script, y que queremos enviar al servidor junto con el resto de campos del formulario:

@Html.HiddenFor(model => model.Name)
<span id="currentName"></span>
<button id="selectName">Select name</button>
...
<script>
    $(function() {
        $("#selectName").click(function () {
            // Get the name using javascript
            var name = prompt("Please enter the name");
            $("#Name").val(name);
            $("#currentName").text(name);
            return false;
        });
    });
</script>

Para cubrir estos casos, jQuery Validate, entre sus múltiples settings, permite especificar mediante un selector qué campos deben ser ignorados cuando se realice la validación. Esto se define en la opción ignore y defecto su valor es “:hidden”, lo cual es el motivo de que sean ignorados:

los campos hidden,
los que tengan la propiedad CSS display igual a none,
aquellos que tengan ancho y alto cero,
y aquellos cuyos padres en el DOM sean invisibles según estos mismos criterios.

El valor por defecto de ignore puede ser modificado simplemente introduciendo la siguiente porción de scripts de forma que se ejecute tras cargar la biblioteca jQuery Validate:

1	`$.validator.setDefaults({ ignore:` `null` `});`

Con esa simple línea ya se validarán todos los campos del formulario, independientemente de su visibilidad.

Por último, comentar que ignore puede ser también interesante si en algún momento deseamos desactivar la validación para un campo concreto, o un grupo de ellos, siempre que podamos referenciarlos mediante un selector jQuery:

// Do not validate the fields #Name and #Age
// when a condition is satisfied
if(condition) {
   $('form').data('validation').settings.ignore = '#Name,#Age';
}

En fin, un truquillo en el algún momento nos puede venir bien tener mano.

Publicado en: Variable not found.

Deja un comentario Cancelar respuesta