Validator for aui: select with autofield in Liferay

Question

I wanted to know how can we write validator for aui:select field which is in Autofield category.

This is my structure of the code:

for( loop total number of items)
{
// CREATE aui select, and aui inputs by appending the index
}

There is no problem with the functionality of Autofields. I am able to create duplicate entries while viewing of the form by looping through my items collection ,and there is also no problem while "CREATING" the form by using the liferay provided PLUS icon.

I have aui:select element in the container, which will be duplicated according to Autofield functionality. How can I provide a validator for this aui:select element. ?

Answer 1

Assuming some "template" <aui:select> exists within your form similar to:

<aui:select id="elementIdPrefix0" name="elementIdPrefix0" label="Number" showEmptyOption='true' > <!--  options go here  --></aui:select>

In your auto-fields, you would need to provide an on event listener for the clone event. Within the callback you lookup the <aui:select> from within the row container node that was just created (passed into the callback as a parameter).

<script>
  AUI().use('liferay-auto-fields', 'aui-form-validator', function(A){

  //Setup rules
  var elementIdPrefix = '<portlet:namespace />elementIdPrefix',
      myRules  = {},  
      rulesRepository = {};

      rulesRepository[elementIdPrefix] = {required:true};
      myRules [elementIdPrefix + '0'] = rulesRepository[elementIdPrefix];

      //Define validator
      var validator = new A.FormValidator({
                             boundingBox: '#<portlet:namespace />myForm',
                             rules: myRules 
                          });

  new Liferay.AutoFields({
    contentBox: '#my-fields',
    fieldIndexes: '<portlet:namespace />indexes',
    on: {
        'clone': function(container){

             //Lookup the clone
             AUI().all('[name^=<portlet:namespace />elementId]').each(function(node, index){

             if(container.row.contains(node)){
                console.log("Assign to " + node.get('id'))
                //inject the rules
                myRules [node.get('id')] = rulesRepository[elementIdPrefix]
             }
            })
        }
   }
 }).render();
});

</script>

Ideally, you should be able to use a child selector to get the node from within the clone container. I had to provide a different way since I couldn't get that method to work. The reason I can use my approach is due to the fact that I know what the elementIdPrefix is. For the sake of being able to provide an example, I went ahead and took advantage of this fact.

For a more dynamic approach, a selector such as myNode.one('> selectorString'); would have to be used.