Resolved validation conflict with readonly

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_33918114

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量97

点赞数

文章标签： javascript ViewUI

本文介绍了一种解决JQuery Validation插件与HTML表单中设置为readonly的输入字段之间的冲突的方法。通过使用JavaScript监听焦点事件，在用户交互时动态切换readonly属性的状态，确保了表单验证的正确性和数据的安全性。

/**
 * Bug绕过去方案WorkAround
 * Bug描述：
 * JQuery的Validation的和form的input元素设为readonly，一对不可调和的矛盾：
 * 一个设置为required的input元素，永久设置为readonly，表单提交时，如果该字段值为空，
 * Validation功能就不能正常工作；反之，如果不设置readonly，又没法限制用户胡乱粘贴非法数据。
 * http://stackoverflow.com/questions/26838839/how-can-i-enable-jquery-validation-on-readonly-fields
 * para elementId : 元素名称
 */
function resolvedValidationConflictWithReadonly(elementId){
    $(document).on("focusin", elementId, function() {
        $(this).prop('readonly', true);
    });

    $(document).on("focusout", elementId, function() {
       $(this).prop('readonly', false);
    });
}
/**
 * 用于弹框上
 * @param elementId
 */
function resolvedValidationConflictWithReadonlyParent(elementId){
    //不能改成document
    $parent("body").on("focusin", elementId, function() {
        $(this).prop('readonly', true);
    });

    $parent("body").on("focusout", elementId, function() {
       $(this).prop('readonly', false);
    });
}