4

私は現在、この 2 つのプラグインで ajax 送信を機能させるのに問題があります。今のところ、ajax部分なしで自分自身に送信するため、実行と同じアドレスです。ajax部分がどこにあるべきか、formvalidation.ioサブミットハンドラーをトリガーするものは本当にわかりませんでした-on('success.form.fv')から呼び出される必要があると思います

Formvalidation.io 部分

$('#orderForm').find('input[name="radioclient"]')
                .on('ifChanged', function(e) {
                 // some conditionall validation
                })
                .end()
            .formValidation({
                ... options ...
            }).on('success.form.fv', function(e) {
                // Prevent form submission
                e.preventDefault();

                var $form = $(e.target),
                    fv    = $form.data('formValidation');
            console.log('called');


            });

燃料部

$('#orderWizard')
        // Call the wizard plugin
        .wizard()

        // Triggered when clicking the Next/Prev buttons
        .on('actionclicked.fu.wizard', function(e, data) {
            var fv         = $('#orderForm').data('formValidation'), // FormValidation instance
                step       = data.step,                              // Current step
                // The current step container
                $container = $('#orderForm').find('.step-pane[data-step="' + step +'"]');

            // Validate the container
            fv.validateContainer($container);

            var isValidStep = fv.isValidContainer($container);
            if (isValidStep === false || isValidStep === null) {
                // Do not jump to the target panel
                console.log(isValidStep);
                console.log(data);
                e.preventDefault();
            }
        })

        // Triggered when clicking the Complete button
        .on('finished.fu.wizard', function(e) {
            var fv         = $('#orderForm').data('formValidation'),
                step       = $('#orderWizard').wizard('selectedItem').step,
                $container = $('#orderForm').find('.step-pane[data-step="' + step +'"]');

            // Validate the last step container
            fv.validateContainer($container);

            var isValidStep = fv.isValidContainer($container);
            if (isValidStep === true) {
                // Uncomment the following line to submit the form using the defaultSubmit() method
                fv.defaultSubmit();
       // Use Ajax to submit form data
          // $("#loadersp").html('<center><img src="<?PHP echo base_url();?>assets/images/load.gif" alt="Czekaj" /></center>');
    // $.ajax({
           // type: "POST",
            // url: "<?php echo site_url('Zlecenia/dodaj_zgloszenie'); ?>",
            // data:  new FormData(this), 
            // dataType: 'json',
            // cache: false,
         // }).success(function(response) {
                // If there is error returned from server
                // if (response.result === 'error') {
                     // $("#ajax_r").html('<div class="col-md-12"><div class="note note-danger"><h4 class="box-heading">Niepowodzenie</h4><p>'+response.msg+'</p></div></div>');
                     // $("html, body").animate({ scrollTop: 0 }, "slow");
                // } else {

                     // $("#ajax_r").html('<div class="col-md-12"><div class="note note-success"><h4 class="box-heading">Powodzenie</h4><p>'+response+'</p></div></div>');
                     // $("html, body").animate({ scrollTop: 0 }, "slow");
                     // $('#nowyKlient').formValidation('resetForm', true);
                     // $("#nowyKlient").trigger('reset');
                // }
                // });

            e.preventDefault();
                // For testing purpose
                // $('#thankModal').modal();
            }
        });
4

2 に答える 2

6

あなたの質問は、ドワーフ要塞レベルの楽しさでした。それにもかかわらず（またはそのせいで？）、 一緒にプレイするのは楽しかったです。

あなたの質問に答えるために、ドキュメントの次の部分を使用しました。

http://getfuelux.com/javascript.html#wizard-usage-methods - ここから .wizard('next') を使用しました

http://formvalidation.io/examples/ajax-submit/ - あなたもそのページを見つけたようです。Ajax を FormValidation で機能させるための提案された方法と、それがくすぐられる理由を調べました

http://formvalidation.io/api/#default-submit - 何時間も楽しんだ後、ドキュメントでこのことを見つけました。基本的に - つまり - .defaultSubmit は Ajax には使えません - 従来の方法でデータを送信するために使用されます。

http://formvalidation.io/examples/fuel-ux-wizard/ - あなたもそのページを見つけたようです。このコード ベースを使用して、テスト可能な環境を作成しました。HTML マークアップはその例で示されているように使用できますが、Ajax としてデータを送信することは、通常の HTTP リクエストとしてデータを送信することとは異なります。スクリプトを変更する必要があります。

使用したコードが正しく機能しなかったのはなぜですか? Fuel UX の懸念事項は、ステップ間を移動することです。フォームを認識せず、フォームの動作を変更せず、フォーム イベントやイベントを追加しません。気にするのは、前/次のボタンと最後のボタンのクリックだけです。それだけです。FormValidation の関心事 - フォーム - は穏やかに影響します。入力が無効であることがわかると、submit イベントがブロックされます。入力が有効な場合 - 送信イベントがスリップすることを許可します。それはどこにイベントスリップを提出しますか? フォームのデフォルト ハンドラへ。彼らの懸念とイベントの動きを理解すると、Fuel UX、FormValidation、Ajax を連携させるシステムが見えてきます。

以下に、問題を解決する実用的なコードを示します。コピーしてローカルでテストすることができます。ほぼスタンドアロン バージョンです。必要なのは安定したインターネット接続だけです。さまざまな CDN の CSS と JS を使用し、Ajax リクエストを stackoverflow.com に送信します (変更できます。任意のサイトを使用できます。ただし、次の URL を使用すると機能しません)。 file:/// ローカル マシン上)

<!DOCTYPE html>
<html>
    <head>

        <title>Test - teaching FormValidation, Fuel FX and AJAX play together</title>

        <!-- Styles - Bootstrap, FormValidation, Fuel UX -->
        <link rel="stylesheet" href="http://cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://formvalidation.io/vendor/formvalidation/css/formValidation.min.css">
        <link rel="stylesheet" href="http://www.fuelcdn.com/fuelux/3.4.0/css/fuelux.min.css">

        <!-- Scripts - jQuery, Bootstrap, FormValidation, Fuel UX -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="http://cdn.jsdelivr.net/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <script src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
        <script src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
        <script src="http://www.fuelcdn.com/fuelux/3.4.0/js/fuelux.min.js"></script>

    </head>

    <body>

        <h1>Hello, world!</h1>

        <div class="fuelux">
            <div class="wizard" id="orderWizard">
                <ul class="steps">
                    <li data-step="1" class="active"><span class="badge">1</span> Your first step<span class="chevron"></span></li>
                    <li data-step="2"><span class="badge">2</span> Your second step<span class="chevron"></span></li>
                </ul>

                <div class="actions">
                    <button type="button" class="btn btn-default btn-prev"><span class="glyphicon glyphicon-arrow-left"></span>Prev</button>
                    <button type="button" class="btn btn-default btn-next" data-last="Order">Next<span class="glyphicon glyphicon-arrow-right"></span></button>
                </div>

                <form id="orderForm" method="post" class="form-horizontal" action="http://stackoverflow.com">

                    <div class="step-content">
                        <!-- The first panel -->
                        <div class="step-pane active" data-step="1">
                            <div class="form-group">
                                <label class="col-xs-3 control-label">Text-1</label>
                                <div class="col-xs-3">
                                    <input type="text" class="form-control" name="textA" />
                                </div>
                            </div>
                        </div>

                        <!-- The second panel -->
                        <div class="step-pane" data-step="2">
                            <div class="form-group">
                                <label class="col-xs-3 control-label">Text-2</label>
                                <div class="col-xs-3">
                                    <input type="text" class="form-control" name="textB" />
                                </div>
                            </div>
                        </div>
                    </div>

                </form>

            </div>
        </div>

        <script>

        $(document).ready(function() {
            $('#orderForm').formValidation({
                framework: 'bootstrap',
                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                // This option will not ignore invisible fields which belong to inactive panels
                excluded: ':disabled',
                fields: {
                    textA: {
                        validators: {
                            notEmpty: {
                                message: 'The textA is required'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z\s]+$/,
                                message: 'The textA can only consist of alphabetical and space'
                            }
                        }
                    },
                    textB: {
                        validators: {
                            notEmpty: {
                                message: 'The textB is required'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z\s]+$/,
                                message: 'The textB can only consist of alphabetical and space'
                            }
                        }
                    }
                }
            })
            .on('submit', function() {

                // make your form play with Fuel UX
                $('#orderWizard').wizard('next');
            })
            .on('success.form.fv', function(e) {
                // Prevent form submission
                e.preventDefault();
            });

            $('#orderWizard')
                // Call the wizard plugin
                .wizard()

                // Triggered when clicking the Next/Prev buttons
                .on('actionclicked.fu.wizard', function(e, data) {
                    var fv         = $('#orderForm').data('formValidation'), // FormValidation instance
                        step       = data.step,                              // Current step
                        // The current step container
                        $container = $('#orderForm').find('.step-pane[data-step="' + step +'"]');

                    if (data.direction === 'previous') {
                        // Do nothing if you're going to the previous step
                        return;
                    }

                    // Validate the container
                    fv.validateContainer($container);

                    var isValidStep = fv.isValidContainer($container);
                    if (isValidStep === false || isValidStep === null) {
                        // Do not jump to the target panel
                        e.preventDefault();
                    }
                })

                // Triggered when clicking the Complete button
                .on('finished.fu.wizard', function(e) {
                    var fv         = $('#orderForm').data('formValidation'),
                        step       = $('#orderWizard').wizard('selectedItem').step,
                        $container = $('#orderForm').find('.step-pane[data-step="' + step +'"]');

                    // Validate the last step container
                    fv.validateContainer($container);

                    var isValidStep = fv.isValidContainer($container);
                    if (isValidStep === true) {

                        // your Fuel UX wizard mustn't fire
                        // fv.defaultSubmit(); - because what it means
                        // is trigger raw form.submit() -
                        // this function it is designed
                        // to send form in a normal way - no validation,
                        // just a standard 'post' or 'get'
                        // 
                        // but you want ajax - so that means that
                        // normal submit is a no-no for you                     

                        var $form = $('#orderForm');

                        // For testing purpose
                        alert('We started to send your Ajax request');

                        // Use Ajax to submit form data
                        $.ajax({
                            url: $form.attr('action'),
                            type: 'POST',
                            data: $form.serialize(),
                            success: function(result) {
                                // ... Process the result ...
                                // For testing purpose
                                alert('Your Ajax request was successful!');
                            },
                            error: function(result) {
                                // ... Process the result ...
                                // For testing purpose
                                alert('Unfortunately your Ajax request failed');
                            }
                        });
                    }
                });
        });


        </script>

    </body>

</html>
于 2016-03-19T18:07:39.677 に答える