vacios - ¿Cómo puedo habilitar la validación de jquery en campos de solo lectura?

validar campos con jquery

Question

Chicos de http://jqueryvalidation.org/ acaban de lanzar la versión 1.13.1. Comprobando en su sitio web veo esto en el registro de cambios:

NÚCLEO: * Ignore los campos de solo lectura y deshabilitados. (9f4ba10)

Este es el enlace: https://github.com/jzaefferer/jquery-validation/commit/9f4ba10ea79b4cf59225468d6ec29911f0e53a0a

Uso algunas plantillas bootstrap y una de ellas ahora usa esa versión. Eso me trae un problema, uso el atributo de solo lectura para evitar que los usuarios escriban fechas manualmente, por lo que su única opción es elegir una fecha del selector de fechas.

Con este cambio, el complemento de validación ignora las entradas de solo lectura marcadas como necesarias, ¿puede alguien ayudarme sugiriendo alguna solución para 1.13.1 o versiones futuras? He encontrado una pregunta para hacer lo contrario: ¿Cómo puedo deshabilitar la validación de jQuery en campos de solo lectura?

Answer 1

La solución con la configuración del atributo de readonly en el evento de disparo de focusin es buena, pero requiere que escribamos controladores en el bloque <script> (¿Por qué? Firefox no admite el enfoque de enfoque de entrada para los elementos de entrada).

Entonces, en mi opinión, la solución simple y multiplataforma está configurada onkeydown="return false;" atributo como:

<input type="text" name="myBean.date" onkeydown="return false;">

Esto deja el elemento elegible para la validación y no permite ingresar nada en él.

Answer 2

No me gustaba vincularme a los eventos de enfoque / salida. También requiere que agregues un estilo CSS. El siguiente código elimina el atributo de solo lectura y lo vuelve a aplicar cuando el formulario no es válido.

$(''#form'').submit(function () {
    var children = $(this).find(''input[readonly]'');
    children.prop(''readonly'', false);

    var validform = $(this).valid();
    if (validform) {
        $(this).unbind(''submit'').submit();
    } else {
        children.prop(''readonly'', true);
    }

    e.preventDefault();
    e.stopPropagation();
})

Answer 3

Puede anular la función de "elementos" originales con una implementación que sea bastante similar a la implementación original, excepto por el manejo de campo de solo lectura. Esta no es una solución elegante, pero funciona. Si actualiza la biblioteca de validación de jquery, también debe volver a verificar el método anulado.
* UpToDate * Consulte jquery-validate-1.14 changeLog : Revertir "Omitir los campos de lectura solo y deshabilitados". :) :)

$.validator.prototype.elements = function() {
    var validator = this,
    rulesCache = {};

    return $( this.currentForm )
    .find( "input, select, textarea" )
    .not( ":submit, :reset, :image, [disabled]") // changed from: .not( ":submit, :reset, :image, [disabled], [readonly]" )
    .not( this.settings.ignore )
    .filter( function() {
        if ( !this.name && validator.settings.debug && window.console ) {
            console.error( "%o has no name assigned", this );
        }

        if ( this.name in rulesCache || !validator.objectLength( $( this ).rules() ) ) {
            return false;
        }

        rulesCache[ this.name ] = true;
        return true;
    });         
};

Answer 4

Gracias por su sugerencia, Panoptik, agregar readonly en focusin , y luego eliminarla en focusout fue la forma más limpia, ¡gracias! Me contesto en caso de que alguien tenga el mismo problema. Espero eso ayude.

$(document).on("focusin", "#someid", function() {
   $(this).prop(''readonly'', true);  
});

$(document).on("focusout", "#someid", function() {
   $(this).prop(''readonly'', false); 
});