如何在只读字段上启用 jquery 验证？

Question

http://jqueryvalidation.org/ 的各位刚刚发布了 1.13.1 版。检查他们的网站，我在更新日志上看到了这个：

核心： * 忽略只读以及禁用的字段。 (9f4ba10)

这是链接：https://github.com/jzaefferer/jquery-validation/commit/9f4ba10ea79b4cf59225468d6ec29911f0e53a0a

我使用了一些引导模板，其中一个现在使用该版本。这给我带来了一个问题，我使用只读属性来防止用户手动输入日期，所以他们唯一的选择是从日期选择器中选择一个日期。

通过此更改，验证插件将忽略标记为必需的只读输入，任何人都可以帮我建议一些针对 1.13.1 或未来版本的修复程序吗？我发现了一个相反的问题：How can I disable jquery validation on readonly fields?

Answer 1

感谢您对 Panoptik 的建议，在 focusin 上添加 readonly，然后在 focusout 上删除它是最干净的方式，万分感谢！我回答自己，以防有人遇到同样的问题。希望对您有所帮助。

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

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

Answer 2

您可以使用与原始实现非常相似的实现来覆盖原始“元素”函数，但只读字段处理除外。 这不是一个优雅的解决方案，但它确实有效。 如果您更新您的 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 事件上设置readonly 属性的解决方案很好，但需要我们在<script> 块中编写处理程序（为什么？例如，Firefox 不支持输入元素的onfocusin attr）。

所以，简单且跨平台的解决方案在我看来是设置onkeydown="return false;"属性，如：

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

这使元素有资格进行验证，并且不允许在其中输入任何内容。

Answer 4

我不喜欢绑定到 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();
})