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

Question

I'm trying to validate a required Select option with aui.

for input fields the code below works without any issue :

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

But with Select option field, I cannot customise the required error message :

for example :

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

My Question is : How can I customize the error message for required field in <aui:Select>

Thanks .

Answer 1

You can validate an aui:select with custom message as following (Tested Code):

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>

Script:

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