如何在div中包装有问题的字段？
如何在div中包装有问题的字段？
提问于 2009-10-01 09:41:06
它将错误消息作为默认行为来显示<label>标记，但是我的CSS的设置方式需要一个div来包装有问题的元素，并在<p>标记中显示消息。
如果没有错误，我的html如下所示：
<div class="grid-26 append-2">
<p class="noMarginBottom">
<label>First Name</label>
<div class="jNiceInputWrapper">
<div class="jNiceInputInner">
<input type="text" class="text jNiceInput" name="name" />
</div>
</div>
</p>
<span class="clear" />
</div>
对于错误，它需要看起来像这样。请注意具有类error和<p>标记的div。
$(document).ready(function() {
$("#contact_form").validate({
rules: {
name: {
required: true
}
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-26 append-2">
<div class="error">
<p>Please write your real name</p>
<p class="noMarginBottom">
<label>First Name</label>
<div class="jNiceInputWrapper">
<div class="jNiceInputInner">
<input type="text" class="text jNiceInput" name="name" />
</div>
</div>
</p>
<span class="clear" />
</div>
</div>
回答 3
Stack Overflow用户
发布于 2009-10-02 13:09:08
这是我的完整工作代码--我选择使用默认的<label>标记而不是<p>标记。
$(document).ready(function(){
$("#contact_form").validate({
rules:{
name: {
required: true
},
}
,messages: {
name: "Please write your full name"
}
,errorClass: "error_label"
,errorPlacement: function(error,element){
parentDiv = element.parents('.grid-26');
parentDiv.wrapInner('<div class="error"></div>');
errorDiv = parentDiv.children(".error");
error.appendTo(errorDiv);
}
,success: function(element){
var errorDiv = element.parents('.error');
element.remove();
errorDiv.siblings().remove();
errorDiv.replaceWith(errorDiv.children());
}
});
});谢谢你的帮助，Alex！
Stack Overflow用户
发布于 2009-10-01 09:51:08
label.parents('.append-2')
.prepend('<p>Please write your real name</p>')
.wrapInner('<div class="error"></div>');要将其恢复到以前的状态，请执行以下操作：
var error = label.parents('.error');
error.siblings().remove();
error.replaceWith(error.children());Stack Overflow用户
发布于 2009-10-01 11:27:53
我想通了：
,errorPlacement: function(error,element){
$('[for='+element.attr("name")+']').parents('.grid-26')
.prepend('<p>'+error.text()+'</p>')
.wrapInner('<div class="error"></div>');
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1502934
复制相关文章
相似问题
腾讯云开发者
