样式表单错误消息出现问题

Question

长话短说，当我提交表单时，每个输入字段下都有错误消息，其中包含无效值。 我正在使用Zend_Form，因此标记如下所示：

<form enctype="application/x-www-form-urlencoded" method="post" action="/auth/register"><dl class="zend_form">
<dt id="firstName-label"><label for="firstName" class="required">First name</label></dt>
<dd id="firstName-element">
<input type="text" name="firstName" id="firstName" value="" />
<ul class="errors"><li>Value is required and can't be empty</li></ul></dd>

<dt id="lastName-label"><label for="lastName" class="required">Last name</label></dt>
<dd id="lastName-element">
<input type="text" name="lastName" id="lastName" value="" />
<ul class="errors"><li>Value is required and can't be empty</li></ul></dd>
<dt id="birthdate-label"><label for="birthdate" class="required">Birthdate (YYYY-MM-DD)</label></dt>
<dd id="birthdate-element">
<input type="text" name="birthdate" id="birthdate" value="" />
<ul class="errors"><li>Value is required and can't be empty</li></ul></dd>
<dt id="email-label"><label for="email" class="required">Email</label></dt>
<dd id="email-element">
<input type="text" name="email" id="email" value="aaa" />
<ul class="errors"><li>'aaa' is no valid email address in the basic format local-part@hostname</li></ul></dd>

<dt id="username-label"><label for="username" class="required">Username</label></dt>
<dd id="username-element">
<input type="text" name="username" id="username" value="" />
<ul class="errors"><li>Value is required and can't be empty</li></ul></dd>
<dt id="password-label"><label for="password" class="required">Password</label></dt>
<dd id="password-element">
<input type="password" name="password" id="password" value="" />
<ul class="errors"><li>Value is required and can't be empty</li></ul></dd>
<dt id="password2-label"><label for="password2" class="required">Confirm password</label></dt>
<dd id="password2-element">
<input type="password" name="password2" id="password2" value="" />
<ul class="errors"><li>Value is required and can't be empty</li></ul></dd>

<dt id="captcha-input-label"><label for="captcha-input" class="required">Captcha</label></dt>
<dd id="captcha-element">
<img width="125" height="50" alt="" src="/images/captcha/7978c51b6114d77be14cff3c66e8f514.png" />
<input type="hidden" name="captcha[id]" value="7978c51b6114d77be14cff3c66e8f514" id="captcha-id" />
<input type="text" name="captcha[input]" id="captcha-input" value="" />
<ul class="errors"><li>Captcha value is wrong</li></ul></dd>
<dt id="register-label">&#160;</dt><dd id="register-element">
<input type="submit" name="register" id="register" value="Submit" /></dd></dl></form>

我的CSS样式如下：

@CHARSET "UTF-8";

.errors {
    color: #D8000C;
}
.zend_form dt {
    clear: both;
    width: 35%;
    text-align: right;
    padding-right: 1em;
    font-weight: bold;
}
.zend_form dt, .zend_form dd {
    float: left;
    margin-top: 1em;
}
.zend_form #captcha-element img {
    float: left;
    border: 1px solid #000;
}
.zend_form #captcha-input {
    margin-left: 1em;
}
.zend_form #captcha-element .errors {
    clear: both;
    padding-top: 1em;
}

问题是，当错误消息太长时，它将上下移动关联的输入字段，并且看起来不太好。 这是一个示例（请参阅电子邮件字段）：

我不是CSS忍者，因此无法解决此问题。 有任何想法吗？

Answer 1

如果您不想更改html结构，那么类似

.zend_form dd { width: 50%; }

会成功的

Answer 2

除非我错过了非常明显的内容，否则您的CSS不能轻松解决此解决方案，并且问题比不涉及重新设计整个表单的简单解决方案更深层次地扎根。

如果您想快速解决（错误消息将保持原样），请在html中使用以下更改：

<li>'aaa' is no valid email address<br /> in the basic format local-part@hostname</li>

Answer 3

我做了这样的事情（$ this指表单本身）：

    $elements = $this->getElements();
    foreach($elements as $elem) {
      $elem->removeDecorator('Errors');
    }

后者，您可以在表单中添加装饰器：

    $this->addDecorators(array(
        array('HtmlTag', array('tag'=>'dl', 'class'=>'form1')),
        array('FormErrors')
    ));