3

我对 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>
4

2 回答 2

8

演示

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 评论后更新

更新了演示

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

另一种方式DEMO

参考

http://jqueryvalidation.org/validate/

于 2013-11-05T12:48:43.287 回答
0

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

error.appendTo(element.closest('.ui-field-contain'));
于 2014-04-21T09:31:21.820 回答