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

Question

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

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

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

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

С этим изменением плагин проверки игнорирует введенные вставляемые входы, помеченные как необходимо, может ли кто-нибудь помочь мне предложить некоторое исправление для версий 1.13.1 или будущих версий? i've нашел вопрос, чтобы сделать наоборот: How can I disable jquery validation on readonly fields?

Answer 1

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

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

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

Answer 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; 
    });   
}; 

Answer 3

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

Answer 4

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

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

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

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