CODEWITHSUNDEEP
javascriptvalidationliferayliferay-6liferay-aui
Sanjeetjh
Sanjeetjh

Reputation: 31

why AUI's Dropdown required validation fire fist before textfield's validation

I have On form liferay, by useing AUI taglib with some text field and dropdown. Both have required validation. Code is as follows: 

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

when I am submitting that first select field's required validation are run and show error message after I select dropdown value then resubmit then its again show text field validation message.

But I want it show required message as order as in form.

what was I done wrong?

Thanks Sanjeet Jha

Upvotes: 1

Views: 1034

Answers (1)

wikimix
wikimix

Reputation: 467

I think that the best way is to use <aui:validator name="custom"> for example, for a required field, use this snippet of code :

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

So, you can use this custom validator for every custom validator type: minLength, maxlength, alpha (using regex), etc...

Upvotes: 2

Related Questions