auto field validator liferay javascript

Question

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

Answer 1

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>