Question

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

+-------------+
|             |
|             |    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？

感谢您的帮助

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

验证失败时创建分层面板

1 个答案: