Cancel Button in custom default.php layout leads to form validation error

Question

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>

Answer 1

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.

Answer 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.

Answer 3

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.