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

Posted 2023-05-09

【中文标题】在 liferay 中使用 <aui:select > 自定义必填字段的错误消息

【英文标题】：customize error message for required field with <aui:select > in liferay

【发布时间】：2015-05-14 23:19:04

【问题描述】：

我正在尝试使用 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> 中必填字段的错误消息

谢谢。

【参考方案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：

成功风格

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

【讨论】：

我也有同样的问题。你能建议任何其他解决方案吗？我的问题是我有一个动态表单，下拉列表的数量未知，id-s 和所需的消息都来自服务器端。此外，我不能在 中使用 ，如果这样做，Liferay 会抛出 NullPointerException。任何想法？提前致谢。

欢迎来到 SO。如果以上答案不能满足您的要求，您可以使用***.com/questions/ask 提出新问题。

请忽略我之前的评论，我可以使用您的解决方案，谢谢。但我有一个问题：如果我使用它而不是<aui:validator>，则成功（绿色）和错误（红色）css 样式仅在我单击提交按钮时应用于该字段，而不是当我单击远离该字段时.对于<aui:validator>，它们适用于两种情况。你知道为什么吗？

这是因为在提交表单时调用了自定义验证器。

实际上，当用户单击下拉菜单时也会调用它，因为如果将其留空，它会显示自定义错误消息。只是没有应用的红色/绿色错误/成功 css 样式。他们只有在点击提交按钮时才会这样做。