jQuery 验证消息显示在 jquery mobile 中的文本输入中答案

【问题标题】：Jquery validate message showing inside the text input in jquery mobilejQuery 验证消息显示在 jquery mobile 中的文本输入中
【发布时间】：2013-11-05 12:42:39
【问题描述】：

我是 jQuery mobile 的新手，我正在使用 jQuery Validate 插件进行表单控件验证，一切正常，但验证消息与输入文本框一起显示。这是图片：

jQuery

 $(document).live('pageinit', function (e) {
     $('#form1').validate({             
         submitHandler: function (form) {
             $.mobile.changePage('#success', { transition: "slide" });
             return false; 
         }
     });
 });

HTML

    <div data-role="fieldcontainer">
        <label for="fname" data-theme="d">First Name:</label>
        <input type="text" id="fname" name="fname" data-theme="d" placeholder="Enter First Name" required>
        <br />
    </div>           
    <div data-role="fieldcontainer">
        <label for="lname" data-theme="d">Last Name:</label>
        <input type="text" id="lname" name="lname" data-theme="d" placeholder="Enter Last Name" required>
    </div>
    <div data-role="fieldcontainer">
        <label for="email" data-theme="d">E-mail Address:</label>
        <input type="email" id="email" name="email" data-theme="d" placeholder="Enter Email" required>
    </div>

【问题讨论】：

标签： jquery jquery-mobile jquery-validate

【解决方案1】：

DEMO

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo(element.parent().prev());
    }
});

CSS

.error{
    color:red;
    display:block; //to show error message in new line
}

在 OP 评论后更新

Updated DEMO

errorPlacement: function (error, element) {
        error.appendTo(element.parent().parent().after());
},

另一种方式DEMO

参考

http://jqueryvalidation.org/validate/

【讨论】：

我在 submitHandler 函数之前添加了代码“errorPlacement: function (error, element) { error.appendTo(element.prev()); }”，现在它没有显示消息
谢谢，我想念父母，对吧？顺便问一下，如何在文本框下方显示消息？
标签下的消息仍然不是文本框。是否可以在文本框下方制作？
更好地使用errorPlacement: function (error, element) { error.appendTo(element.parent().parent().after()); }, 。它对你不起作用，因为我在每个文本框之后的 html 中添加了 span 标签。
@Delphian 欢迎乐于助人 :)

【解决方案2】：

我建议对 JQM 1.4 使用以下代码：

error.appendTo(element.closest('.ui-field-contain'));

【讨论】：