Question

在我的自定义portlet中，我想在输入字段下方显示错误消息，当前它显示在输入字段上方。我正在使用LR6.1.10EE ga1。我在处理验证的服务器\ROOT\html\js\aui\aui-form-validator\aui-form-validator.js文件下对此进行了分析。

javascript方法_defErrorFieldFn通过调用field.placeBefore(stackContainer); // or field.placeAfter(stackContainer);来定义显示错误消息的位置。默认情况下，_defErrorFieldFn会调用field.placeBefore(stackContainer);。

任何人都可以帮我在自定义portlet中覆盖它或找到另一个解决方案吗？我不想改变核心AlloyUI。

Answer 1

据我所知aui-form-validator source *，似乎没有一种简单的方法可以通过API更改错误消息的位置。我还尝试覆盖_defErrorFieldFn()并将placeBefore()更改为placeAfter()，但这不起作用。

但是，我找到了一个似乎相对优雅的解决方法。 _defErrorFieldFn()调用printStackError()，可以覆盖field.placeAfter(container)来调用printStackError()之前调用formValidator.printStackErrorDefault = formValidator.printStackError; formValidator.printStackError = function(field, container, errors) { field.placeAfter(container) formValidator.printStackErrorDefault(field, container, errors); };，如下所示：

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

这是一个可运行的例子，显示了这个工作：

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

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

如何在输入字段下方显示错误消息

1 个答案: