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

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

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

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

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

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

Ответ 1

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

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

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

Ответ 2

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

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

Ответ 3

Мне не нравилось привязываться к событиям focus/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();
})

Ответ 4

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

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

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

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