benbone

Hello Justin, I tried with the code you posted but the restult seems the same, the group index changes only if before I digit a value in the field and then save it in the database by clicking on Publish. I saw that id and names are handled in cmb2.js/cmb2.min.js, so I tried to add the “bougus” class to the cmb_after_cb function as follows:

function cmb_after_cb( $args, $field ) {
	echo '<div id="post_' . $field->args( '_name' ) . '_errorloc" class="bougus input-error">' . $field->args( '_name' ) . /* show me */'</div>';
}

after I changed the js_limit_group_repeat function this way:

function js_limit_group_repeat( $post_id, $cmb ) {

  // Grab the custom attribute to determine the limit
  $limit = absint( $cmb->prop( 'rows_limit' ) );
  $limit = $limit ? $limit : 0;
  ?>

  <script type="text/javascript">
  jQuery(document).ready(function($){
      // Only allow 5 groups
      var limit            = <?php echo $limit; ?>;
      var fieldGroupId     = 'group_crew';
      var $fieldGroupTable = $( document.getElementById( fieldGroupId + '_repeat' ) );
      var countRows = function() {
          return $fieldGroupTable.find( '> .cmb-row.cmb-repeatable-grouping' ).length;
      };
      var disableAdder = function() {
          $fieldGroupTable.find('.cmb-add-group-row.button').prop( 'disabled', true );
      };
      var enableAdder = function() {
          $fieldGroupTable.find('.cmb-add-group-row.button').prop( 'disabled', false );
      };

			// start change

			var boarding = $( "div.bougus" ).attr( "id" );

			var count = 0;

			$("button.cmb-add-group-row").click(function() {

				count++;

				if ( count == "1" ) {
					boarding = boarding.replace( "0", count );
				} else if ( count == "2" ) {
					boarding = boarding.replace( "1", count );
				} else if ( count == "3" ) {
					boarding = boarding.replace( "2", count );
				} else if ( count == "4" ) {
					boarding = boarding.replace( "3", count );
				} else if ( count == "5" ) {
					boarding = boarding.replace( "4", count );
				} // 'rows_limit'   => 5

				$( "div.bougus" ).attr( "id", boarding );

			});

			// end change

      $fieldGroupTable
          .on( 'cmb2_add_row', function() {
              if ( countRows() >= limit ) {
                  disableAdder();
              }
          })
          .on( 'cmb2_remove_row', function() {
              if ( countRows() < limit ) {
                  enableAdder();
              }
          });
  });
  </script>
  <?php
}
add_action( 'cmb2_after_post_form_foo_metagroup', 'js_limit_group_repeat', 10, 2 );

With these two changements the id changes progressively when adding a new group, but obviously it does for all the groups, and I couldn’t handle the button cmb-remove-group-row: this means that if I remove a group the progressive numeration doesn’t change and gets wrong.
I guess I’m forced to abandon the idea of using repeatable groups now, and when I’ll really have time to study another way I’ll try another cleaner solution. However, if you have any other advice of how I can modify the code it’d be very enlightening.
Thanks so much again.

Hello Michael, thank you for your answer and thanks all for this great plugin.
Well, I created a repeatable custom meta box like this:

function foo_register_cmb_crew() {

	$prefix = 'foo_';

  $cmb_group_crew = new_cmb2_box( array(
    'id'           => $prefix . 'metagroup',
    'title'        => __( 'Crew', 'cmb2' ),
    'object_types' => array( 'crew', ),
    'rows_limit'   => 5, // function js_limit_group_repeat
  ) );

  $group_field_id = $cmb_group_crew->add_field( array(
    'id'          => 'group_crew',
    'type'        => 'group',
    'options'     => array(
      'group_title'        => __( '{#}° Mate', 'cmb2' ), // {#} gets replaced by row number
      'add_button'         => __( 'Add Mate', 'cmb2' ),
      'remove_button'      => __( 'Delete Mate', 'cmb2' ),
    ),
  ) );

  $cmb_group_crew->add_group_field( $group_field_id, array(
    'id'         => 'firstname',
    'type'       => 'text',
    'name'       => __( 'Name', 'cmb2' ),
    'attributes' => array(
      'placeholder'       => 'Edward',
      'onfocus'           => 'this.placeholder=\'\'',
      'onblur'            => 'this.placeholder=\'Edward\'',
    ),
    'after'      => 'cmb_after_cb',
  ) );

  $cmb_group_crew->add_group_field( $group_field_id, array(
    'id'         => 'lastname',
    'type'       => 'text',
    'name'       => __( 'Last Name', 'cmb2' ),
    'attributes' => array(
      'placeholder'       => 'Teach',
      'onfocus'           => 'this.placeholder=\'\'',
      'onblur'            => 'this.placeholder=\'Teach\'',
    ),
    'after'      => 'cmb_after_cb',
  ) );

 $cmb_group_crew->add_group_field( $group_field_id, array(
    'id'         => 'email',
    'type'       => 'text_email',
    'name'       => __( 'Email', 'cmb2' ),
    'attributes' => array(
      'placeholder'       => 'info@blackbeard.foo',
      'onfocus'           => 'this.placeholder=\'\'',
      'onblur'            => 'this.placeholder=\'info@blackbeard.foo\'',
    ),
    'after'      => 'cmb_after_cb',
  ) );

}
add_action( 'cmb2_admin_init', 'foo_register_cmb_crew', 9999 );

After, in order o validate the fields I use gen_validatorv4.js; at this point I need a target (id/name) that refers to the input (such as the text field) where I can eventually show an error message (in the not repeatable fields everything is perfect), so I thought I could create this target:

function cmb_after_cb( $field_group ) {

  $name = $field_group['_name'];

	echo '<div id="post_' . $name . '_errorloc" class="input-error">' . $name . /* show me */'</div>';

}

For the first group everything is ok, e.g.
group_crew[0][firstname], group_crew[0][lastname], group_crew[0][email]
but when I add a new group the index I got with the function I wrote above remains always the same, while in the cpt crew (add new screen) actually it keeps going with its progression, e.g.
group_crew[1][firstname], group_crew[2][firstname], group_crew[3][firstname] and so on.
And that’s the problem I can’t solve! How can I get the exact index of each group?
Thanks in advance; I’m not so good in oop 🙂