1

Faced with such a problem, how to make sure that the used AJAX request is sent only in case of successful completion of the built-in Joomla js validator. The code pattern is about the

    <?php
// no direct access
defined('_JEXEC') or die;

JHtml::_('behavior.keepalive');
JHtml::_('behavior.tooltip');
JHtml::_('behavior.formvalidation');


$doc = JFactory::getDocument();
$doc->addScript(JUri::base() . '/components/com_my/assets/js/form.js');
$doc->addStyleSheet(JUri::base() . '/components/com_my/assets/css/form.css');

?>

    <div class="site-edit front-end-edit span10">
        <form id="form-site" action="<?php echo JRoute::_('index.php?option=com_my&task=siteform.save'); ?>" method="post" class="form-validate form-horizontal" enctype="multipart/form-data"> 

            <div class="control-group">
                <div class="control-label"><?php echo $this->form->getLabel('name'); ?></div>
                <div class="controls"><?php echo $this->form->getInput('name'); ?></div>
            </div>
            <div class="control-group">
                <div class="control-label"><?php echo $this->form->getLabel('href'); ?></div>
                <div class="controls"><?php echo $this->form->getInput('href'); ?></div>
            </div>

                <a class="btn" href="<?php echo JRoute::_('index.php?option=com_my&task=siteform.cancel'); ?>" title="<?php echo JText::_('JCANCEL'); ?>"><?php echo JText::_('JCANCEL'); ?></a>
                <button type="submit" class="validate btn btn-primary submit" data-next="options"><?php echo JText::_('JNEXT'); ?></button>

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

Code file /components/com_my/assets/js/form.js`

    jQuery.noConflict();
    (function($){ 
        $(document).ready(function(){
        $('button.submit').on('click', function(){
            $('#form-site').submit();
            return false;
        }); 
            $('#form-site').submit(function(event) {
    var domForm = document.getElementById('form-site');
    if (!document.formvalidator.isValid(domForm)) {
        return false;
    }
                var method = $(this).attr('method');
                var url = $(this).attr('action'); 
                var data = $(this).serialize();      
                $.ajax({
                    type: method,
                    url: url,
                    data: data,
                    dataType: "json",
                    success: function(response){
                        var type= response.type;                  
                        var msg = [];
                        msg[0] = response.msg;
                        var messages = {};
                        messages[""+type+""] = msg;
                        Joomla.renderMessages(messages);
                    }
                });

                return false;
            });        
        });
    })(jQuery);

`

Here I want to hang on the event handler submit the form and if the validation has been passed then send via AJAX or nothing to do now form sent to anyone without regard for the validation fails or not.

Thank Anibal helped to solve the problem

2

There are several ways to prevent an auto submit:

  • Attach the handler to the button, instead of form and return false to stop any further action
  • Remove action attribute from form tag, you can define the URL in a different way when it is ready to be submitted

Additionally, Joomla works based on global Joomla.submitform routine. You can create your own validation path, for example:

Create a button

a href="#" onclick="MyValidation.mySubmitForm"

Define your routine:

var MyValidation = {};

MyValidation.mySubmitForm = function(e) {
    var domForm = document.getElementById('form-site');

    if (document.formvalidator.isValid(domForm)) {
        // remember to define task
        Joomla.submitform(task, domform);
    }

    return false;
}
  • Your answer is not on the subject matter – Yaroslav Jun 27 '15 at 12:30
  • To check the basics, if you do not add your Javascript code, is Joomla form validator working? Otherwise, you may have a Javascript page conflict. – Anibal Jun 27 '15 at 12:47
  • Now all works By clicking on the submit is checked and I see that there are messages about not correctly filled fields, but as soon as there is a sending Ajax request, and it should not be because the fields can not be filled in correctly. That's why I asked is there a possibility of my code to check whether the form is filled out correctly and if so make Ajax request after that – Yaroslav Jun 27 '15 at 13:28
  • I have just added more details to validate the form in an alternative way – Anibal Jun 27 '15 at 13:46
  • Here's what I needed<br> var domForm = document.getElementById ('form-site'); if (! document.formvalidator.isValid (domForm)) { return false; } – Yaroslav Jun 27 '15 at 14:47

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.