Kdjykuj

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 = {

                template: new Template(modelRowTemplate, new RegExp('(^|.|\r|\n)({{\s*(\w+)\s*}})', "")),

                itemsCount: 0,

                addItem: function () {

                    var data = {

                        model_id: '',

                        model_name: '',

                        sku_list: '',

                        image: '',

                        index: this.itemsCount++

                    };

                    data.model_id = arguments[0];

                    data.model_name = arguments[1];

                    data.sku_list = arguments[2];

                    data.image = arguments[3];

                    Element.insert($('<?= /* @escapeNotVerified */ $_htmlId ?>_container'), {

                        bottom: this.template.evaluate(data)

                    });

                    if (data.model_id) {

                        $('models_' + data.index + '_model_id').value = data.model_id;

                    }

                    if (data.model_name) {

                        $('models_' + data.index + '_model_name').value = data.model_name;

                    }

                    if (data.sku_list) {

                        $('models_' + data.index + '_sku_list').value = data.sku_list;

                    }

                    // if (data.image) {

                    //     $('models_' + data.index + '_image').value = data.image;

                    // }

                },

                deleteItem: function (event) {



                    var tr = Event.findElement(event, 'tr');

                    if (tr) {

                        Element.select(tr, '.delete').each(function (elem) {

                            elem.value = '1'

                        });

                        Element.select(tr, ['input', 'select']).each(function (elem) {

                            elem.hide()

                        });

                        Element.hide(tr);

                        Element.addClassName(tr, 'no-display template');

                    }

                    return false;

                }

            };

            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.