javascriptvalidationliferay-aui

auto field validator liferay javascript


I've created autofields with custom validator and it works everything for the first couple, but when I add another two fields the validator just acts how it's validating the first one.

This is my code:

    <div id="groupwork-fields" >
        <div class="lfr-form-row lfr-form-row-inline">
            <div class="row-fields">
                <aui:input fieldParam='name0' id="name0" cssClass="full-size"
                    name="name0"
                    label='<%=AwardConstants.LABEL_NAME %>'
                    value="">
                    <aui:validator name="custom" errorMessage="fill-name">
                        function (val, fieldNode, ruleValue) {
                            var result = true;
                                var selector = document.getElementById("<portlet:namespace/>select-group").value;
                                if (selector == 1 && val === "") {
                                    result = false;
                                }
                                return result;
                        }
                    </aui:validator>
                </aui:input>
                <aui:input cssClass="full-size"
                    id="email0" fieldParam='email0'
                    name="email0"
                    label='<%=AwardConstants.LABEL_EMAIL %>'
                    value="">
                    <aui:validator name="maxLength">100</aui:validator>
                    <aui:validator name="email"></aui:validator>
                    <aui:validator name="custom" errorMessage="fill-email">
                        function (val, fieldNode, ruleValue) {
                            var result = true;
                            var name = document.getElementById("<portlet:namespace/>name0").value;
                            if (name !== "" && val === "") {
                                    result = false;
                             }
                            return result;
                        }
                    </aui:validator>
                </aui:input>
            </div>
        </div>
    </div>

And this is my script:

    <aui:script>
    AUI().use('liferay-auto-fields',function(A) {
        new Liferay.AutoFields({
            contentBox: '#groupwork-fields',
            fieldIndexes: '<portlet:namespace />groupworkIndexes'
        }).render();
    });
    </aui:script>

The thing is I always get the value of the first input and i want to take its own pair.

Thanks


Solution

  • Here,

    I have tried with custom validator on age in auto field and It Works.

    <aui:input name="age" value='' label="Age"></aui:input>
    
    
    <aui:script use="liferay-auto-fields">
    // declares rules
    var rules= {};
    
    // override default error messages
    var fieldStrings = {};
    
    AUI().use('aui-form-validator',
      function(A) {
      var DEFAULTS_FORM_VALIDATOR = A.config.FormValidator;
        A.mix(
            DEFAULTS_FORM_VALIDATOR.RULES,
            {
            customRuleForAge:function (val, fieldNode, ruleValue) {
                var result = false;
                if (val >=18) {
                  result = true;
                }
                return result;
              },
            },
            true
        );
         A.mix(
            DEFAULTS_FORM_VALIDATOR.STRINGS,
            {
              customRuleForAge:"Age Should Be more than 18",
            },
            true
        );
    
        rules = {
          <portlet:namespace/>age: {
            customRuleForAge: true
          }
        };
    
        new A.FormValidator(
                      {
                        boundingBox: '#<portlet:namespace/>researchSubjectForm',
                        fieldStrings: fieldStrings,
                        rules: rules,
                        showAllMessages: true
                      }
                    );
      }
    );
    
    
       new Liferay.AutoFields({
        contentBox: '#research-subject-fields',
        fieldIndexes: '<portlet:namespace />rowIndexes',
        on: {
            'clone': function(container){
              // container.guid will be the number for newly generated row.
    
                rules["<portlet:namespace />age" + container.guid] = {customRuleForAge: true};
    
                fieldStrings["<portlet:namespace />age"+container.guid] = {customRuleForAge};
    
              }
            }
    
       }).render();
    
     </aui:script>