Mryntu

I have added dynamic text box in admin category form.

I want to validate text box must contain 4 comma separate values.

phtml file:

<?php
$_htmlId = 'categorymodel';
$_htmlClass = 'input-text admin__control-text required-entry _required';
$_htmlName = 'model_information';
?>
<div class="control">
 <tr id="attribute-options-table">
 <td colspan="10" class="data-grid">
 <table class="admin__control-table tiers_table" id="tiers_table">
 <tbody id="<?= /* @escapeNotVerified */
 $_htmlId ?>_container"></tbody>
 <tfoot>
 <tr>
 <td colspan="4" class="a-right" id="modelAddButton">
 <button id="modelAddButton" title="Add New Model" type="button"
 class="action-default scalable add" data-ui-id="additional-info-add-button">
 <span>Add New Model</span>
 </button>
 </td>
 </tr>
 </tfoot>
 </table>
 </td>
 </tr>
 <script>
 require([
 'jquery',
 'mage/template',
 "jquery/ui",
 'jquery/validate',
 'mage/mage',
 "prototype"
 ], function (jQuery, mageTemplate) {

 var modelRowTemplate = '<tr>'
 + '<td><input type="hidden" name="<?= /* @escapeNotVerified */ $_htmlName ?>[index][model_id]" value="" id="models_index_model_id" data-form-part="category_form" />'
 + '<input data-form-part="category_form" class="<?= /* @escapeNotVerified */ $_htmlClass ?> required-entry" type="text" name="<?= /* @escapeNotVerified */ $_htmlName ?>[index][model_name]" value="" id="models_index_model_name" /></td>'
 + '<td><input data-form-part="category_form" class="<?= /* @escapeNotVerified */ $_htmlClass ?> required-sku" type="text" name="<?= /* @escapeNotVerified */ $_htmlName ?>[index][sku_list]" value="" id="models_index_sku_list" /></td>'
 // + '<td><input data-form-part="category_form" class="<?= /* @escapeNotVerified */ $_htmlClass ?> required-entry" type="file" name="<?= /* @escapeNotVerified */ $_htmlName ?>[index][image]" value="" id="models_index_image" /></td>'
 + '<td class="last"><input data-form-part="category_form" type="hidden" name="<?= /* @escapeNotVerified */ $_htmlName ?>[index][delete]" class="delete" value="" id="models_index_delete" />'
 + '<button title="<?= /* @escapeNotVerified */ $block->escapeHtml(__('Delete Model')) ?>" type="button" class="scalable delete icon-btn delete-product-option" id="models_index_delete_button" onclick="return modelControl.deleteItem(event);">'
 + '<span><span><span><?= /* @escapeNotVerified */ __("Delete") ?></span></span></span></button></td>'
 + '</tr>';
 var modelControl = \r;
 jQuery("#modelAddButton").on("click", function () 
 modelControl.addItem();
 );

 //if(jQuery("button").hasClass("save"))
 // jQuery("#save").on("click", function () 
 //
 // console.log("sdfsf");
 //
 // var skuList = $('models_0_sku_list').value.split(',');
 // console.log(skuList.length);
 // if(skuList.length != 5)
 // console.log("eror");
 // event.preventDefault();
 // jQuery('models_0_sku_list').after('<label for="models_0_sku_list" generated="true" class="mage-error" id="models_0_sku_list-error">sku required</label>');
 // 
 // );

 // jQuery.validator.addMethod('required-sku', function (v) 
 // var skuList = $('models_0_sku_list').value.split(',');
 // console.log(skuList.length);
 // if(skuList.length != 5)
 // var result = skuList.length < 4;
 // event.preventDefault();
 // return !result;
 // 
 //
 // , jQuery.mage.__('Please enter your comment.'));

 // jQuery("button[data-form-role="save"]").on("click", function () 
 // console.log('sdf');
 // );
 <?php
 if ($block->getCategoryModels()) :
 foreach ($block->getCategoryModels() as $model)://echo "<pre>";print_r($model->getData());
 ?>
 modelControl.addItem('<?php echo $model->getId() ?>', '<?php echo $model->getModelName() ?>', '<?php echo $model->getSkuList() ?>', '<?php echo $model->getImage() ?>');
 <?php
 endforeach;
 endif;
 ?>
 window.modelControl = modelControl;
 );
 </script>
</div>

How to do that ...

Thanks.