Jquery验证在jquery mobile中输入文本内部的消息

Question

我是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>

Answer 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/

Answer 2

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

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