javascript - 为什么 AUI 的 Dropdown 在文本字段验证之前需要验证火拳

Question

我通过将 AUI taglib 与一些文本字段和下拉列表一起使用，在 liferay 表单上。两者都需要验证。代码如下:

<aui:form name="projectInformationForm" action="${projectInformation}" method="post">

    <aui:fieldset label="company.details">
        <aui:layout>
            <aui:column columnWidth="50">
                <aui:input type="text" name="nameOfTheProject"
                    label="name.of.the.project" inlineLabel="true">
                    <aui:validator name="required"></aui:validator>
                </aui:input>

                <aui:input type="text" name="investmentCost" label="investment.cost"
                    inlineLabel="true">
                    <aui:validator name="required"></aui:validator>
                    <aui:validator name="number"></aui:validator>
                </aui:input>

                <aui:select name="typeOfIndustry" label="type.of.industry"
                    inlineLabel="true" required="">
                    <aui:option label="selection.defult" value="" selected="true"></aui:option>                      
                </aui:select>

                <aui:input type="text" name="expectedDateOfStart" label="expected.date.of.start"
                    inlineLabel="true" cssClass="date-picker" >
                    <aui:validator name="required"></aui:validator>
                    <aui:validator name="date"></aui:validator>
                </aui:input>

                <aui:input type="text" name="expectedDateOfCommissioning"
                    label="expected.date.of.commissioning" inlineLabel="true"
                    cssClass="date-picker" >
                    <aui:validator name="required"></aui:validator>
                    <aui:validator name="date"></aui:validator>
                </aui:input>

            </aui:column>
        </aui:layout>
    </aui:fieldset>
    <aui:button-row>
        <aui:button type="button" value="back.text" first="true" onClick="location.href='${showGeneralInformation}'" />
        <aui:button type="submit" value="save.as.draft" onClick="saveNext(this)" />
        <aui:button type="cancel" value="cancel.text" />
        <aui:button type="submit" value="next.text" onClick="saveNext(this)" last="true" />
    </aui:button-row>
    <aui:script>
        function saveNext(button){
            var element = document.getElementById("<portlet:namespace/>buttonNameId");
            element.value = button.value;
        }
    </aui:script>
</aui:form>

当我提交时，第一个选择字段的必需验证运行并在我选择下拉值然后重新提交后显示错误消息，然后再次显示文本字段验证消息。

但我希望它按照表格中的顺序显示所需的消息。

我做错了什么？

谢谢桑 git ·杰哈

Answer 1

我认为最好的方法是使用 <aui:validator name="custom">例如，对于必填字段，使用以下代码片段:

<aui:validator name="custom" errorMessage="field.required">
    function (val, fieldNode, ruleValue) {
        if(val.length > 0) {
            return true;
        } else {
            return false;
        }
    }
</aui:validator>

因此，您可以为每个自定义验证器类型使用此自定义验证器:minLength、maxlength、alpha(使用正则表达式)等...