web-dev-qa-db-ja.com

Joomla 3はAJAXを介してフォームを送信します

このような問題に直面した場合、組み込みのJoomla jsバリデーターが正常に完了した場合にのみ、使用されたAJAXリクエストが送信されることを確認する方法。コードパターンは、

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

コードファイル/ 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);

`

ここで、イベントハンドラーをハングアップさせてフォームを送信します。検証に合格した場合は、AJAXまたは何もしないフォームを送信して、検証に関係なく誰にでもフォームを送信します。

アニバルが問題の解決に貢献してくれてありがとう

ajaxformvalidations
1
Yaroslav

自動送信を防ぐ方法はいくつかあります。

  • フォームの代わりにハンドラーをボタンに接続し、それ以上のアクションを停止するにはfalseを返します
  • フォームタグからアクション属性を削除します。送信準備が整ったときに別の方法でURLを定義できます

さらに、JoomlaはグローバルJoomla.submitformルーチンに基づいて動作します。独自の検証パスを作成できます。次に例を示します。

ボタンを作成

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

ルーチンを定義します：

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