CODEWITHSUNDEEP
liferay-6liferay-aui
Muthukumar Thangavinayagam
Muthukumar Thangavinayagam

Reputation: 31

How to show error message below the Input fields

In my custom portlet, I want to show error message below the input fields,currently it showing above the input fields. I am using LR6.1.10EE ga1. I have done an analysis on this, under the server \ROOT\html\js\aui\aui-form-validator\aui-form-validator.js file handling the validation.

The javascript method _defErrorFieldFn defines the position where the error message is displayed by calling field.placeBefore(stackContainer); // or field.placeAfter(stackContainer);. By default _defErrorFieldFn calls field.placeBefore(stackContainer);.

Can anyone help me to override this in a custom portlet or find another solution? I don't want to change the core AlloyUI.

Upvotes: 1

Views: 1609

Answers (1)

stiemannkj1
stiemannkj1

Reputation: 4549

As far as I can tell from the aui-form-validator source*, there does not seem to be a simple way to change the position of the error message via the API. I also tried overriding _defErrorFieldFn() and changing placeBefore() to placeAfter(), but that did not work.

However, I did find a workaround which seems relatively elegant. _defErrorFieldFn() calls printStackError(), which can be overridden to call field.placeAfter(container) before calling through to the original printStackError() like so:

formValidator.printStackErrorDefault = formValidator.printStackError;

formValidator.printStackError = function(field, container, errors) {
    field.placeAfter(container)
    formValidator.printStackErrorDefault(field, container, errors);
};

Here's a runnable example which shows this working:

AUI().use('aui-form-validator', function (A) {
    formValidator = new A.FormValidator({
        boundingBox: '#myForm'
    });

    formValidator.printStackErrorBefore = formValidator.printStackError;

    formValidator.printStackError = function(field, container, errors) {
        field.placeAfter(container)
		formValidator.printStackErrorBefore(field, container, errors);
	};
});
<script src="http://cdn.alloyui.com/1.5.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/1.5.1/aui-skin-classic/css/aui-skin-classic-all-min.css" rel="stylesheet">
<form id="myForm">
  <p>
    <label class="aui-field-label" for="name">Name:</label>
    <input class="aui-field-required" type="text" name="name" />
  </p>
  <p>
    <label class="aui-field-label" for="email">Email:</label>
    <input class="aui-field-required aui-field-email" type="text" name="email" />
  </p>
  <p>
    <label class="aui-field-label" for="age">Age:</label>
    <input class="aui-field-required aui-field-digits" type="text" name="age" />
  </p>
  <p>
    <input class="aui-button-input" type="submit" value="Submit" />
    <input class="aui-button-input" type="reset" value="Reset" />
  </p>
</form>

*Liferay 6.1 uses the AlloyUI 1.5 aui-form-validator

Upvotes: 2

Related Questions