1

I am facing a problem with my cancel button in my default.php, which is a form with some input fields aswell a save and cancel button. There are some required fields in my form. When I use the cancel button, the form validation will be activated and informs me to fill out these fields.

Could it be a result of using the default.php layout?

05022015 - UPDATE
The form is a front-end form and the cancel button has been done via Joomla custom JToolBar

06022015 - Add reduced code of layout

<?php
defined('_JEXEC') or die;
JHtml::_('behavior.formvalidation');
JHtml::_('behavior.keepalive');
JHtml::_('formbehavior.chosen', 'select');
?>

<script type="text/javascript">
        Joomla.submitbutton = function(task)
    {
                if (task == 'contact.cancel' || document.formvalidator.isValid(document.getElementById('contact-form')))
        {
                        alert (task);
                        Joomla.submitform(task, document.getElementById('contact-form'));
        } else {
                if (task != 'contact.cancel' && document.formvalidator.isValid(document.id('contact-form'))) {
                        Joomla.submitform(task, document.getElementById('contact-form'));
                } else {
                    alert('<?php echo $this->escape(JText::_('JGLOBAL_VALIDATION_FORM_FAILED')); ?>');
                }
            }
    }               
</script>

<form action="<?php echo JRoute::_('index.php?option=com_ecms&view=contact&id=' . (int) $this->form->getInput('id')); ?>" method="post" name="contactForm" id="contact-form" class="form-validate" enctype="multipart/form-data">
    <div class="row-fluid">
        <fieldset class="form-horizontal">
                        <div class="control-group">
                            <div class="control-label"> 
                                <?php echo $this->form->getLabel('id'); ?>
                            </div>
                            <div class="controls">
                <?php echo $this->form->getInput('id'); ?>
                            </div>
            </div>
                        <div class="control-group">
                            <div class="control-label"> 
                                <?php echo $this->form->getLabel('surname'); ?>
                            </div>
                            <div class="controls">
                <?php echo $this->form->getInput('surname'); ?>
                            </div>
            </div>
                </fieldset>
                <div id="toolbar-cancel" class="btn-wrapper">
                    <button class="btn btn-small" onclick="Joomla.submitbutton('contact.cancel')">
                        <span class="icon-cancel"></span><?php echo JText::_('JCANCEL') ?>
                    </button>
                </div>            
        </div>
    <?php echo JHtml::_('form.token'); ?>
</form>
2

Another solution is not to use JToolBar at all. Do really need it? Simply make your button like this ("Cancel" button for example):

<button type="button" class="btn" onclick="Joomla.submitbutton('contact.cancel')">
    <span class="icon-cancel"></span>&#160;<?php echo JText::_('JCANCEL') ?>
</button>

Then in JS:

Joomla.submitbutton = function(task) 
{
    if (task == 'contact.cancel')
    {
        Joomla.submitform(task);
    }
}

And you are good to go.

  • I followed your recommendation! It's unbelievable, I got the same error message!!! I added the javascript now to my last post! Maybe I don't see the failure on that?! – Perino Feb 5 '15 at 16:18
  • Even when I remove the 'validation' from the form-tag and additionally comment out //JHtml::_('behavior.formvalidation'), the instruction to fill out the required field comes up!! – Perino Feb 5 '15 at 16:54
  • Please show me you button code. Pay attention that it should have a onclick="Joomla.submitbutton('company.cancel')". Also pay attention that you form should have id="company-form" if you use document.getElementById('company-form'). I think you mess something in the code. – Dmitry Rekun Feb 6 '15 at 7:13
  • here is the button code, I did it following your recommendation. The code will be triggered, because my alert statements will be shown up. Pls see my own answer below: <div id="toolbar-cancel" class="btn-wrapper"> <button class="btn btn-small" onclick="Joomla.submitbutton('contact.save')"> <span class="icon-save"></span><?php echo JText::_('JSAVE') ?> </button> </div> – Perino Feb 6 '15 at 7:18
  • I've reduced the for to two fields, same problem. I would like to show the whole form code, whats the best way? – Perino Feb 6 '15 at 7:36
2

It seems, that this is a problem of Joomlas custom JToolBar, which is used here to create a Toolbar for the front end.

see last paragraph: https://docs.joomla.org/Client-side_form_validation

The problem is, that the work around of this article does not work!

Meanwhile I found the problem. If you have a closer look to the button code, which will be produced in the hmtl output of the site, then you will see, that the type of the button is not set. In this case, it should be 'type="button"'. If this is not set, the form validation will be triggered in any case.

A normal button integration, like suggestion of Dmitry, leads to success. Joomlas JToolbar for custom toolbars needs a correction.

  • With IE and Safari the form validated fields will be shown in red, but a few seconds later the cancel procedure follows. With Firefox, the validation fields will be shown in red and nothing happens. – Perino Feb 6 '15 at 7:15
1

This is not a result of the layout that you are using but a limitation of the cancel button to skip the form validation on its own.

Typically, you will need to implement something like this:

JFactory::getDocument()->addScriptDeclaration('
    Joomla.submitbutton = function(task)
    {
        if (task == "article.cancel" || document.formvalidator.isValid(document.getElementById("item-form")))
        {
            ' . $this->form->getField('articletext')->save() . '
            Joomla.submitform(task, document.getElementById("item-form"));
        }
    };
');

This was copied from the core Joomla article edit.php layout (https://github.com/joomla/joomla-cms/blob/bd3d9cc947458437f790180fad4b817ee36e41d3/administrator/components/com_content/views/article/tmpl/edit.php line 64)

The basic idea is to override the submit handler to check if it is a cancel button (with task = VIEWNAME.cancel OR to validate the document. This should skip the validator when you cancel and process the button as you'd expect.

You will probably need to do a few things to get this to work in your case:

  1. Remove ' . $this->form->getField('articletext')->save() . '. That is specific to that view.
  2. Update article.cancel to be VIEWNAME.cancel.
  3. Update the document.getElementById(...) to be the id for your form.
  • I already did your 3 steps (first recommendation i commented out). I also implemented java alert to inform me, wheter a specific position will be reached in the script. The if-clause will be reached and fullfilled, but the form validation will be still activated. – Perino Dec 26 '14 at 16:27
  • What is task set to when the function is called? – David Fritsch Dec 26 '14 at 16:28
  • MyComponentName.Cancel which is in the if-clause and will be reached, following my alert statements. – Perino Dec 26 '14 at 16:37
  • Make sure that the case of the task matches exactly. If it does, the second half of that or statement will not be triggered. Also, is it making it to the submitform call before the validator runs? – David Fritsch Dec 26 '14 at 16:43
  • When I do a alert(task) the proper taskname will be shown after clicking the cancel button. The alert statement is positioned after if (task == 'company.cancel') { alert(task);} .....now I have removed the next line Joomla.submitform(task, document.getElementById("item-form")); ...the validation will still triggered, although there is only the alert part in this if-else segment – Perino Dec 26 '14 at 18:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.