验证失败时创建分层面板答案

【问题标题】：Create a layered panel when validation fails验证失败时创建分层面板
【发布时间】：2012-06-12 16:12:45
【问题描述】：

我想创建一个包含验证错误的图层，并将其显示为与我的表单并排显示的工具提示。类似于以下示例：

+-------------+
|             |
|             |    Normal Form
|             |
+-------------+

+-------------+-----+
|             |     |
|             |-----+    Form with visible 
|             |          validation errors
+-------------+

清楚吗？错误容器只有在存在验证错误时才可见，并且应该位于表单本身的右上角区域。

实际上我有以下示例标记：

<form id="information" method="post" action="#">
   <fieldset>
      <legend>Please enter your contact details</legend>
          <div id="id">
              <label for="name">Name: (*)</label>
              <input type="text" id="name" class="details" name="name" maxlength="50" title="Insert your Name" />
          </div>
          <div id="id">
              <label for="email">Email: (*)</label>
              <input type="text" id="email" class="details" name="email" maxlength="50" title="Insert your Email" />
          </div>
   </fieldset>
   <div id="submission">
       <input type="submit" id="submit" value="Send" name="send"/>
   </div>
</form>

还有这个jquery代码：

$(document).ready(function () {
    var form = $('#information');
    var container = $('<div class="error"><p>Errors:</p><ol></ol></div>').appendTo(form).hide();
    var validator = form.validate({
        errorContainer: container,
        errorLabelContainer: $("ol", container),
        wrapper: 'li',
        meta: "validate"
    });
});

在表单下方附加错误列表非常有效。如何在表单顶部显示错误 div？

感谢您的帮助

【问题讨论】：

要么添加一个容器来容纳<fieldset> 和<div id="submission"> 并增加表单的宽度，要么在表单周围创建一个容器，即表单的宽度+错误容器并附加错误 div 到那个。
感谢您的回复。您的解决方案对我来说很清楚，但也许我不太清楚。我的意思是一个分层面板，独立于表单，但只是在其位置上“绑定”到表单本身的右上角位置。我已经有一个容器，有时是一个 jquery 对话框。
如果我理解正确...如果您将.error 与position:absolute; top:0; right:0; 一起设置会发生什么？
我尝试在.css({ position: absolute, top: 0, right: 0}) 中添加内联样式，结果是不再显示错误并且验证不起作用，因为它不会阻止提交。

标签： jquery jquery-ui jquery-validate styling

【解决方案1】：

通过显式设置带有 ID 的错误消息容器并设置标签容器，可以更轻松地根据需要设置错误消息框的样式。

<div id="formColumn">
    <form id="information" method="post" action="#">
   <fieldset>
      <legend>Please enter your details</legend>
          <div id="id">
              <label for="name">Name: (*)</label>
              <input type="text" id="name" class="details required" name="name" maxlength="50" title="Insert your Name" />
          </div>
          <div id="id">
              <label for="email">Email: (*)</label>
              <input type="text" id="email" class="details required" name="email" maxlength="50" title="Insert your Email" />
          </div>
   </fieldset>
   <div id="submission">
       <input type="submit" id="submit" value="Send" name="send"/>
   </div>
</form>
</div>
<div id="messageBox"><p>Errors:</p><ol></ol></div>

jQuery:

$(function() {
    var form = $('#information');
    var validator = form.validate({
        errorContainer: "#messageBox",
        errorLabelContainer: "#messageBox ol",
        wrapper: 'li',
        meta: "validate"
    });
});

CSS：

#formColumn{
    display:inline;
    float:left
}
#messageBox{
    display:none;
    float:left
}

此外，请谨慎使用“error”类作为您包含的错误消息，因为验证器插件在其他地方使用此名称。

http://jsfiddle.net/yvxRc/

【讨论】：