Joomla 3 submit a form via AJAX after javascript checking fields validation

Question

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

Answer 1

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;
}