Как включить проверку jquery в полях только для чтения?

ребята из http://jqueryvalidation.org/ только что выпущенная версия 1.13.1. Проверяя на своем сайте, я вижу это в журнале изменений:

ядро: * Игнорировать только для чтения, а также отключенные поля. (9f4ba10)

Это ссылка: https://github.com/jzaefferer/jquery-validation/commit/9f4ba10ea79b4cf59225468d6ec29911f0e53a0a

Я использую некоторые шаблоны Bootstrap и один из них теперь использует эту версию. Это приносит мне проблему, я использую атрибут readonly, чтобы запретить пользователям вводить даты вручную, поэтому их единственный вариант-выбрать дату из datepicker.

с этим изменением плагин проверки игнорирует входы readonly, отмеченные по мере необходимости, может ли кто-нибудь помочь мне предложить некоторое исправление для 1.13.1 или будущих версий? я нашел вопрос, чтобы сделать наоборот: Как отключить проверку jquery в полях только для чтения?

19
datepicker jquery jquery-validate readonly

4 ответов

Спасибо за ваше предложение Паноптик, добавив readonly on focusin, а затем focusout Это самый чистый способ, огромное спасибо! Я отвечаю сам себе, если у кого-то есть такая же проблема. Надеюсь, это поможет.

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

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

вы можете переопределить исходную функцию "elements" с реализацией, которая очень похожа на исходную реализацию, за исключением обработки поля readonly. Это не элегантное решение, но оно работает. При обновлении библиотеки проверки jquery также необходимо перепроверить переопределенный метод.
* UpToDate* см. jquery-validate-1.14 изменений: Revert " игнорировать только чтение, а также отключенные поля.":):)

$.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;
    });         
};
10

мне не нравилось привязываться к событиям focusin/out. Он также требует, чтобы вы добавили стиль CSS. Приведенный ниже код удаляет атрибут readonly и повторно применяет его при виде не действует.

$('#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();
})
2

решение с установкой readonly атрибут на fired focusin событие хорошее, но требует от нас писать обработчики в <script> блок (почему? Например, Firefox не поддерживает onfocusin attr для входных элементов).

и простой и кросс-платформенное решение на мой взгляд-это набор onkeydown="return false;" атрибут, как:

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

это оставляет элемент подходящим для проверки и не позволяет вводить что-либо в него.

0