Validation 使用<；自定义必填字段的错误消息；aui：选择>；有生之年

我正在尝试用aui验证所需的Select选项

对于输入字段，以下代码可以正常工作：

<aui:input name="name" value="${name}" label="name">
     <aui:validator name="required" errorMessage="your-message-here"></aui:validator>
</aui:input>

但使用选择选项字段，我无法自定义所需的错误消息：

例如：

<aui:select required="true" label="field.label" id="id" name="name" useNamespace="false">
    <aui:option value="" label="first.option" selected="option1"/>
    <aui:option value="" label="second.option" selected="option2"/>
    <aui:option value="" label="third.option" selected="option3"/>

</aui:select>

我的问题是：如何定制

---

谢谢。

您可以使用自定义消息验证aui:select，如下所示（测试代码）：

HTML

<aui:form method="post" name="fm">  
    <aui:select name="sampleDropdown" label="">
        <aui:option selected="true" value="">Select an Option</aui:option>
        <aui:option value="1">Option 1</aui:option>
        <aui:option value="2">Option 2</aui:option>
        <aui:option value="3">Option 3</aui:option>
    </aui:select>

    <aui:button value="Save" type="submit"></aui:button>    
<aui:form>

错误样式

---

我也有同样的问题。你能提出其他解决办法吗？我的问题是我有一个动态表单，下拉列表数量未知，id-s和必需的消息都来自服务器端。此外，我不能在内部使用，如果我这样做，Liferay会抛出NullPointerException。有什么想法吗？提前谢谢，欢迎光临。如果上面的答案不满足您的要求，您可以使用新的问题。请忽略我以前的评论，我可以使用您的解决方案，谢谢。但我有一个问题：如果我使用这个而不是

，那么成功（绿色）和错误（红色）css样式仅在我单击submit按钮时应用于该字段，而不是在单击远离该字段时应用于该字段。使用

，它们将应用于这两种情况。你知道为什么吗？这是因为在提交表单时会调用自定义验证程序。实际上，当用户单击下拉列表时也会调用自定义验证程序，因为如果用户将其留空，则会显示自定义错误消息。只是红色/绿色的错误/成功css样式没有得到应用。它们仅在单击“提交”按钮时执行。

AUI().ready('alloy-node', 'aui-form-validator', function(A) {
    var formValidator = new A.FormValidator({
        boundingBox: document.<portlet:namespace />fm,
        rules: {
            <portlet:namespace />sampleDropdown: {
                required: true
            }
        },
        fieldStrings: {
            <portlet:namespace />sampleDropdown: {
                required: 'Hey, can\'t leave this unselected.'
            }
        },
        on: {
            validateField: function(event) {},
            validField: function(event) {},
            errorField: function(event) {},
            submitError: function(event) {
                var errors = event.validator.errors;
                event.preventDefault();
            },
            submit: function(event) {
                return false;
            }
        }
    });
});

.aui .control-group.success input,
.aui .control-group.success select,
.aui .control-group.success textarea {
  border-color: #488f06;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

.aui .control-group.success .checkbox,
.aui .control-group.success .radio,
.aui .control-group.success input,
.aui .control-group.success select,
.aui .control-group.success textarea {
  color: #488f06;
}

.aui .control-group.error input,
.aui .control-group.error select,
.aui .control-group.error textarea {
  border-color: #b50303;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

.aui .control-group.error .checkbox,
.aui .control-group.error .radio,
.aui .control-group.error input,
.aui .control-group.error select,
.aui .control-group.error textarea {
  color: #b50303;
}

.aui .control-group.error .control-label,
.aui .control-group.error .help-block,
.aui .control-group.error .help-inline {
  color: #b50303;
}

.aui .help-inline {
  display: inline-block;
  padding-left: 5px;
  vertical-align: middle;
}