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

Posted 2023-05-07

【中文标题】如何在只读字段上启用 jquery 验证？

【英文标题】：How can I enable jquery validation on readonly fields?

【发布时间】：2015-01-06 11:08:07

【问题描述】：

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?

【问题讨论】：

您需要验证什么？选择的日期有误？

我需要它是必需的，所以它会变红并且所有的验证化妆。在这个版本之前它工作正常。

也许为这个字段设置默认值会更好？

我不能让用户在输入字段中输入任何内容。

更换插件太复杂了。我可以建议您删除只读属性并将自定义事件处理程序附加到事件“焦点”的输入字段并调用 blur()。因此，您可以防止用户手动更改日期。另一种方法是启用只读焦点（或日期选择器显示）并禁用模糊（日期选择器隐藏/关闭）。而且您的验证插件必须可以正常工作。

【参考方案1】：

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

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

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

【讨论】：

您还可以将输入设置为只读字段。因此，您将拥有只读的“所有功能”。类似于：customreadonlybackground-color: #eee;光标：不允许；

【参考方案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;
    );         
;

【讨论】：

+1 另外.not(":submit, :reset, :image, [disabled], [readonly]:not(.my-special-input-class)")会更优雅。

【参考方案3】：

在触发的focusin 事件上设置readonly 属性的解决方案很好，但需要我们在<script> 块中编写处理程序（为什么？例如，Firefox 不支持输入元素的onfocusin attr）。

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

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

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

【参考方案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();
)

【讨论】：

我觉得应该是function(e)而不是function()。不幸的是，SO不允许我只修复一个字符。

如果你没有对 e 做任何事情，它不需要是 function(e)。在这种情况下，事件没有被使用，所以不需要它。