使用 jquery mobile 版本 >1.2 时 jquery 的对齐问题验证生成的消息

【问题标题】：Alignment issue for jquery validate generated message while using jquery mobile versions >1.2使用 jquery mobile 版本 >1.2 时 jquery 的对齐问题验证生成的消息
【发布时间】：2014-04-11 06:46:59
【问题描述】：

升级到jquery mobile 1.4.2后，对齐jquery validate错误信息

 <input id="field1" type="text" class="required" />

错了。

请查看Fiddle

【问题讨论】：

不要单独依赖 jsFiddle，始终将完整简洁的示例放在您的 OP 中。

标签： jquery html css jquery-mobile jquery-validate

【解决方案1】：

jQuery Mobile 将input 包装在一个包含样式的 div 中。错误消息应该放在该 div 之外。为此，您需要在$.validator.setDefaults 中修改errorPlacement。

根据返回的element，您可以将它放在.before() 或.after() 那个div，或者您想要的任何其他位置。

$(document).on("pagecreate", function () {
    $.validator.setDefaults({
        errorPlacement: function (error, element) {
            if ($(element)[0].localName == "input") {
                $(element).parent().after(error);
            }
        }
    });

    $('#btn').click(function () {
        $("#form1").valid();
    });
});

Demo

【讨论】：