javascriptliferayliferay-auiliferay-6.2

Liferay 6.2 Form Validation Problems


I've been trying to adapt the validator from this example in a LR 6.2 GA6 Portlet. However, I can't get it to work. Curiously the validator-tag isn't working as well.
This is the form I've been using

<aui:form name="<portlet:namespace />address" action="<%=doSmthURL %>" id="fm">
<aui:container>
    ...
    <aui:row>
        <aui:col>
            <aui:input name="conditions1" label="text" type="checkbox" id="conditions1">
            </aui:input>
        </aui:col>
    </aui:row>
    <aui:row>
        <aui:col>
            <aui:input name="conditions2" label="conditions2" type="checkbox" id="conditions2"/>
        </aui:col>
    </aui:row>
</aui:container>
<aui:button-row>
    <aui:button type="cancel" value="Back"></aui:button>
    <aui:button type="submit" value="Finish"></aui:button>
</aui:button-row></aui:form>

And this is the Aui:Script part

<aui:script>
var rules = {
        conditions1:{
            required:true
        },
        conditions2:{
            required:true
        }
}
var fieldStrings = {
        conditions1:{
            required:"Bitte nimm die allgemeinen Geschäftbedingungen an"
        },
        conditions2:{
            required:"Bitte nimm die allgemeinen Geschäftbedingungen an"
        }
}
AUI().use(
        'aui-form-validator',
        function(A) {
           new A.FormValidator(
             {
              boundingBox: "#fm",
              fieldStrings: fieldStrings,
              rules: rules,
              showAllMessages: true
             }
           )
        }
);

I am not sure why it isn't working. Since using a validator tag isn't doing anything as well maybe it is a problem with javascript excecution as a whole.

I hope someone can help me.

Kind regards, JSM


Solution

  • Sorry, that documentation is confusing, and needs to be updated.

    If you are able, I'd suggest using the <aui:validator> inside the <aui:input>.

    <aui:input name="conditions1" label="text" type="checkbox" id="conditions1">
        <aui:validator name="required" errorMessage="Bitte nimm die allgemeinen Geschäftbedingungen an" />
    </aui:input>
    

    This way Portal is handling all the necessary JS.

    If you can't use <aui:validator, I'd suggest using Liferay.Form to access the Form Validator attached to the form. Because currently, you're attaching an additional one, which may conflict.

    <aui:script use="liferay-form">
        var form = Liferay.Form.get('<portlet:namespace />fm');
    
        var oldFieldRules = form.get('fieldRules');
    
        var newFieldRules = [
            {
                body: function (val, fieldNode, ruleValue) {
                    return (val !== '2');
                },
                custom: true,
                errorMessage: 'must-not-equal-2',
                fieldName: 'fooInput',
                validatorName: 'custom_fooInput'
            },
            {
                fieldName: 'fooInput',
                validatorName: 'number'
            }
        ];
    
        var fieldRules = oldFieldRules.concat(newFieldRules);
    
        form.set('fieldRules', fieldRules);
    </aui:script>