为什么AUI的Dropdown在textfield验证之前需要验证

时间:2015-02-14 12:01:48

标签: javascript validation liferay liferay-6 liferay-aui

我有一个表单liferay,通过使用AUI taglib和一些文本字段和下拉列表。两者都需要验证。代码如下:

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

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

但是我希望它显示所需的消息作为表单中的顺序。

我做错了什么?

由于 Sanjeet Jha

1 个答案:

答案 0 :(得分:2)

我认为最好的方法是使用<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(使用正则表达式)等...