樣式表單錯誤消息出現問題

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')
    ));