0

I have an another problem in my form in the administrator side of the website. I have a custom component, in which there is a form. When I click on Save or Save and close, or even the little arrow next to Save and close, I have those error :

For clicking on "Save" and "Save and close" : cannot read properties of undefined (reading isValid())

For clicking on the little arrow : cannot read properties of null (reading 'classlist')

Here is the code that show's up in the dev tool for these error :

For isValid() (in core.js):

if (!newValidate || document.formvalidator.isValid(form)) {
        Joomla.submitform(task, form);
      }

For classlist (in dropdown.js) :

_isShown() {
    return this._menu.classList.contains(CLASS_NAME_SHOW);
  }

I don't really know which code could be interesting between the controller, the model and the view. I will give you the view, because it's the most interesting code I think :

<?php
// No direct access to this file
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Router\Route;
use Joomla\CMS\Factory;
defined('_JEXEC') or die('Restricted access');

HtmlHelper::_('behavior.tooltip');
HtmlHelper::_('behavior.formvalidator');
HtmlHelper::_('formbehavior.chosen', 'select');
HtmlHelper::_('behavior.keepalive');



?>

<link rel="stylesheet" href="components/com_skydivespa/assets/addons/timepicker/css/bootstrap-timepicker.min.css">

<script src="components/com_skydivespa/assets/addons/timepicker/js/bootstrap-timepicker.min.js"></script>

<script src="media/system/js/fields/validate.js"></script>

<script type="text/javascript">
jQuery(document).ready(function ($) {
    //get url's params
    var URL = {};
    document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function () {
        function decode(s) {
            return decodeURIComponent(s.split("+").join(" "));
        }
        URL[decode(arguments[1])] = decode(arguments[2]);
    });

    //creation datpicker
    jQuery('<span class="add-on"><i class="icon-clock"></i></span>').insertAfter('#jform_heure_in');
    jQuery('#jform_heure_in').timepicker({
        minuteStep: 15,
        secondeStep: 30,
        template: 'dropdown',
        showSeconds: false,
        showMeridian: false
    });

    jQuery('<span class="add-on"><i class="icon-clock"></i></span>').insertAfter('#jform_heure_out');
    jQuery('#jform_heure_out').timepicker({
        minuteStep: 15,
        secondeStep: 30,
        template: 'dropdown',
        showSeconds: false,
        showMeridian: false
    });
});
</script>

<style type="text/css" media="screen">
#tab1 .control-group .controls, #tab2 .control-group .controls, #tab3 .control-group .controls, #tab4 .control-group .controls, #tab5 .control-group .controls {
    margin-left: 0;
}
#tab5 .control-group .control-label{
    width: auto;
}
</style>
<form action="<?php echo Route::_('index.php?option=com_skydivespa&layout=edit&id='.(int) $this->item->id); ?>" method="post" name="adminForm" id="adminForm" class="form-validate" enctype="multipart/form-data">
    <div class="row">
        <div class="col-lg-6 form-horizontal">
            <fieldset class="adminForm">
                <legend><?php echo Text::_( 'BACK_COM_SKYDIVESPA_FORMATION_TITLE_FORM' ); ?></legend>
                <div class="adminFormList">
                    <?php foreach ($this->form->getFieldset('params') as $field) : ?>
                        <div class="control-group">
                            <div class="control-label">
                                <?php echo $field->label; ?>
                            </div>
                            <div class="controls">
                                <?php if($field->name == 'jform[heure_in]' || $field->name == 'jform[heure_out]') echo '<div class="input-append bootstrap-timepicker">'; ?>
                                <?php echo $field->input; ?>
                                <?php if($field->name == 'jform[heure_in]' || $field->name == 'jform[heure_out]') echo '</div>'; ?>
                            </div>
                        </div>

                    <?php endforeach; ?>
                </div>
            </fieldset>

            <fieldset class="adminForm">
                <legend><?php echo Text::_( 'BACK_COM_SKYDIVESPA_FORMATION_TITLE_INFOS' ); ?></legend>
                <div class="adminFormList">
                    <?php foreach ($this->form->getFieldset('infos') as $field) : ?>
                        <div class="control-group">
                            <div class="control-label">
                                <?php echo $field->label; ?>
                            </div>
                            <div class="controls">
                                <?php echo $field->input; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </fieldset>
            
        </div>
        <div class="col-lg-6 form-horizontal pull-right">

            <ul class="nav nav-tabs">
                <li class="nav-item"><a class="nav-link active" href="#tab1" data-bs-toggle="tab"><?php echo Text::_( 'BACK_COM_SKYDIVESPA_FORMATION_LANGUAGES_FR' ); ?></a></li>
                <li class="nav-item"><a class="nav-link" href="#tab2" data-bs-toggle="tab"><?php echo Text::_( 'BACK_COM_SKYDIVESPA_FORMATION_LANGUAGES_EN' ); ?></a></li>
                <li class="nav-item"><a class="nav-link" href="#tab3" data-bs-toggle="tab"><?php echo Text::_( 'BACK_COM_SKYDIVESPA_FORMATION_LANGUAGES_NL' ); ?></a></li>
                <li class="nav-item"><a class="nav-link" href="#tab4" data-bs-toggle="tab"><?php echo Text::_( 'BACK_COM_SKYDIVESPA_FORMATION_LANGUAGES_DE' ); ?></a></li>
                <li class="nav-item"><a class="nav-link" href="#tab5" data-bs-toggle="tab"><?php echo Text::_( 'BACK_COM_SKYDIVESPA_FORMATION_RESPONSE' ); ?></a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab1">
                    <fieldset class="adminForm">
                        <legend><?php echo Text::_( 'BACK_COM_SKYDIVESPA_FORMATION_TITLE_DESC_FR' ); ?></legend>
                        <div class="adminFormList">
                            <?php foreach ($this->form->getFieldset('descriptions_fr') as $field) : ?>
                                <div class="control-group">
                                    <div class="control-label">
                                        <?php echo $field->label; ?>
                                    </div>
                                    <div class="controls">
                                        <?php echo $field->input; ?>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </fieldset>
                </div>
                <div class="tab-pane" id="tab2">
                    <fieldset class="adminForm">
                        <legend><?php echo Text::_( 'BACK_COM_SKYDIVESPA_FORMATION_TITLE_DESC_EN' ); ?></legend>
                        <div class="adminFormList">
                            <?php foreach ($this->form->getFieldset('descriptions_en') as $field) : ?>
                                <div class="control-group">
                                    <div class="control-label">
                                        <?php echo $field->label; ?>
                                    </div>
                                    <div class="controls">
                                        <?php echo $field->input; ?>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </fieldset>
                </div>
                <div class="tab-pane" id="tab3">
                    <fieldset class="adminForm">
                        <legend><?php echo Text::_( 'BACK_COM_SKYDIVESPA_FORMATION_TITLE_DESC_NL' ); ?></legend>
                        <div class="adminFormList">
                            <?php foreach ($this->form->getFieldset('descriptions_nl') as $field) : ?>
                                <div class="control-group">
                                    <div class="control-label">
                                        <?php echo $field->label; ?>
                                    </div>
                                    <div class="controls">
                                        <?php echo $field->input; ?>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </fieldset>
                </div>
                <div class="tab-pane" id="tab4">
                    <fieldset class="adminForm">
                        <legend><?php echo Text::_( 'BACK_COM_SKYDIVESPA_FORMATION_TITLE_DESC_DE' ); ?></legend>
                        <div class="adminFormList">
                            <?php foreach ($this->form->getFieldset('descriptions_de') as $field) : ?>
                                <div class="control-group">
                                    <div class="control-label">
                                        <?php echo $field->label; ?>
                                    </div>
                                    <div class="controls">
                                        <?php echo $field->input; ?>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </fieldset>
                </div>
                <div class="tab-pane" id="tab5">
                    <fieldset class="adminForm">
                        <legend><?php echo Text::_( 'BACK_COM_SKYDIVESPA_FORMATION_RESPONSE_DESC' ); ?></legend>
                        <div class="accordion" id="accordion2" >
                              <div class="accordion-group">
                                <div class="accordion-heading">
                                  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne" style="background: #a94442;font-weight: 600;color: #ffffff">
                                    Utilisation paramètres pour les réponses aux inscrits&nbsp;&nbsp;&nbsp;<small>(cliquer pour ouvrir / fermer)</small>
                                  </a>
                                </div>
                                <div id="collapseOne" class="accordion-body collapse">
                                  <div class="accordion-inner">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <dl>
                                                <dt>%1$s</dt>
                                                <dd>type de formation</dd>
                                                <dt>%2$s</dt>
                                                <dd>titre de formation</dd>
                                                <dt>%3$s</dt>
                                                <dd>descprition de formation</dd>
                                                <dt>%4$s</dt>
                                                <dd>date de début de formation</dd>
                                                <dt>%5$s</dt>
                                                <dd>nombre de jour de formation</dd>
                                                <dt>%6$s</dt>
                                                <dd>heure de début de formation</dd>
                                                <dt>%7$s</dt>
                                                <dd>heure de fin de formation</dd>
                                                <dt>%8$s</dt>
                                                <dd>nombre maximum</dd>
                                                <dt>%9$s</dt>
                                                <dd>langue de la formation</dd>
                                            </dl>
                                        </div>
                                        <div class="col-lg-6">
                                            <dl>
                                                <dt>%10$s</dt>
                                                <dd>prénom</dd>
                                                <dt>%11$s</dt>
                                                <dd>nom</dd>
                                                <dt>%12$s</dt>
                                                <dd>sexe</dd>
                                                <dt>%13$s</dt>
                                                <dd>date de naissance</dd>
                                                <dt>%14$s</dt>
                                                <dd>poids</dd>
                                                <dt>%15$s</dt>
                                                <dd>langue</dd>
                                                <dt>%16$s</dt>
                                                <dd>adresse</dd>
                                                <dt>%17$s</dt>
                                                <dd>code postal</dd>
                                                <dt>%18$s</dt>
                                                <dd>ville</dd>
                                                <dt>%19$s</dt>
                                                <dd>pays</dd>
                                                <dt>%20$s</dt>
                                                <dd>email</dd>
                                                <dt>%21$s</dt>
                                                <dd>tél. / gsm</dd>
                                                <dt>%22$s</dt>
                                                <dd>pers. de contact</dd>
                                                <dt>%23$s</dt>
                                                <dd>tel. pers. de contact</dd>
                                                <dt>%24$s</dt>
                                                <dd>Référence de l'inscription</dd>
                                            </dl>
                                        </div>
                                    </div>                            
                                  </div>
                                </div>
                              </div>
                        </div>
                        <div class="adminFormList">
                            <?php foreach ($this->form->getFieldset('response_register') as $field) : ?>
                                <div class="control-group">
                                    <div class="control-label">
                                        <?php echo $field->label; ?>
                                    </div>
                                    <div class="controls">
                                        <?php echo $field->input; ?>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </fieldset>
                </div>
            </div>

        
            
        </div>
    </div>
    <div>
        <input type="hidden" name="task" value="" />
        <?php echo HtmlHelper::_('form.token'); ?>

    </div>
</form>

Do someone have a hint on why I have this error please ?

I checked the core.js and dropdown.js. I used a console.log(document.isValid()) but it return undefined. I also checked if HTMLHelper is correctly set up, and if there is an error on the save, save&new function in the controller and model

  • 1
    I just solve this. HTMLHelper::_('behavior.formvalisator'); was not include in the HtmlView.php file – Sephirah Jul 11 '23 at 14:43
  • Welcome to Stack Overflow (SO). Consider to add an answer instead of a comment with your solution. This allows you to accept the answer later on, marking the question as answered. This will not only help you but also others having this or a similar problem (and is basically how SO works). Let me know if you need help with this. – hakre Jul 11 '23 at 22:52

0 Answers0