Question

我尝试使用aui验证所需的选择选项。

对于输入字段，下面的代码无任何问题：

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

中自定义必填字段的错误消息

谢谢。

Answer 1

您可以验证aui：选择自定义消息如下（测试代码）：

<强> 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>

<强>脚本：

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

<强> CSS：

成功风格

.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;
}

使用liferay中的<aui：select> </aui：select>自定义必填字段的错误消息

1 个答案: