我是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>
答案 0 :(得分: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
参考
答案 1 :(得分:0)
我建议对 JQM 1.4 使用以下代码:
error.appendTo(element.closest('.ui-field-contain'));