在 liferay 中使用 <aui:select > 为必填字段自定义错误消息

Question

我正在尝试使用 aui 验证必需的 Select 选项。

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

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

但是对于 Select 选项字段，我无法自定义所需的错误消息：

例如：

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

脚本：

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:

success style

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

error style

.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 > 为必填字段自定义错误消息

customize error message for required field with <aui:select > in liferay

validation

liferay

liferay-6

liferay-aui