web-dev-qa-db-fra.com

Joomla 3 soumet un formulaire via AJAX après validation des champs de vérification javascript

Face à un tel problème, comment s’assurer que la requête utilisée AJAX est envoyée uniquement en cas de réussite du validateur Joomla js intégré. Le modèle de code concerne

    <?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>

Fichier de code/composants/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);

`

Ici, je tiens à accrocher le gestionnaire d’événements à soumettre le formulaire et si la validation a été passée, envoyer via AJAX ou rien à faire maintenant. Le formulaire envoyé à qui que ce soit sans tenir compte de la validation échoue ou non.

Merci Anibal a aidé à résoudre le problème

ajaxformvalidations
1
Yaroslav

Il existe plusieurs moyens d'empêcher une soumission automatique:

  • Attachez le gestionnaire au bouton, au lieu du formulaire et retournez false pour arrêter toute action ultérieure
  • Supprimer l'attribut d'action de la balise de formulaire, vous pouvez définir l'URL d'une manière différente lorsqu'il est prêt à être soumis

De plus, Joomla fonctionne sur la base de la routine globale Joomla.submitform. Vous pouvez créer votre propre chemin de validation, par exemple:

Créer un bouton

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

Définissez votre 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;
}
2
Anibal