Fuelux向导和formvalidation.io - ajax

Question

我目前在用这两个插件获得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');


            });

Fuelux零件

$('#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();
            }
        });

Answer 1

你的问题是矮人堡垒级的乐趣。尽管如此(或者正因为这个原因？)，和它一起玩还是一种乐趣。

为了回答您的问题，我使用了文档的以下部分：

http://getfuelux.com/javascript.html#wizard-usage-methods -我从这里用了.wizard(“next”)

http://formvalidation.io/examples/ajax-submit/ -我看到你也找到那一页了。我研究了让Ajax为FormValidation工作的方法，以及它为什么会发痒。

http://formvalidation.io/api/#default-submit --经过许多小时的娱乐之后，我在文档中找到了这个东西。基本上--也就是说--对于Ajax来说，.defaultSubmit是一个不--不--它是用来以传统方式提交数据的。

http://formvalidation.io/examples/fuel-ux-wizard/ -我看到你也找到那一页了。我使用这个代码库来生成一个可测试的环境。HTML标记在该示例中是可用的，但是将数据作为Ajax发送与作为普通HTTP请求发送数据不同:我们需要更改脚本。

为什么你使用的代码不能正常工作？燃料UX的担心-是关于在两步之间移动。--它不知道表单--它不改变表单的行为，不添加表单事件或事件。它只关心的是prev/next按钮和单击最后一个按钮。仅此而已。FormVal环流的关注点--表单--但它对它们的影响是温和的:如果它能够看到输入无效，就会阻塞submit事件。如果输入是有效的-它允许提交事件滑动。提交活动的地点是哪里？若要默认窗体的处理程序，请执行以下操作。现在，当您了解他们的关注点和事件的移动时，您可以看到将使UX、FormValidation和Ajax一起运行的系统。

下面，我给出了一个解决问题的工作代码。您可以复制它并在本地进行测试-它几乎是独立的版本。唯一需要的是稳定的互联网连接--它使用来自不同can的CSS和JS，并向stackoverflow.com发送Ajax请求(您可以更改该请求，使用任何站点--但如果在本地计算机上使用来自file:///的URL，则无法工作)

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

Answer 2

为了避免在ajax响应之前更改步骤，应该注意一些细节。首先，ajax是默认异步的，在ajax向控制器发出请求之后，燃料JQuery向导不等待ajax响应并执行方法过程，然后对于等待ajax响应，必须使用ajax设置“ajax:false”。对于使用燃料UX向导及其中的一些方法(例如on.(“change”))，我们注意到，在步移以避免或继续移动时，对于其能够理解或不理解的结果对象，我们必须返回true或false。在我的示例中，我使用了一个变量，用于在ajax方法之后返回true或false ，我称之为"stepState“。看看我的例子，它对我起了作用：

$('#fuelux-wizard').ace_wizard().on('change', function (e, info) {
                if (info.step == 1) {
                    if ($('#ConfirmFirstStepInfo').is(':checked')) {
                        return true;
                    }
                    else {
                        return false;
                    }
                } else if (info.step == 2) {
                    if ($('#ConfirmSecondStepInfo').is(':checked')) {
                        var ourObject = {};

                        var stepState = null;
                        $.ajax({
                            type: 'POST',
                            data: ourObject,
                            async: false,
                            contentType: false,
                            processData: false,
                            cache: false,
                            url: '/Controller/Action',
                            success: function (response) {
                                if (response.Success == true) {

                                    stepState = true;
                                    return true;
                                }
                                else {

                                    stepState = false;
                                    return false;
                                }
                            },
                            error: function () {

                                stepState = false;
                                return false;
                            },
                            failure: function () {

                                stepState = false;
                                return false;
                            }
                        });

                        return stepState;
                    }
                    else {

                        return false;
                    }
                } else if (info.step == 3) {
                    if (!$('#validation-form').valid()) 
                    { 
                        return false; 
                    }else{
                        return true; 
                    }
                }
        }).on('finished', function (e) {
            alert('finished!');
        }).on('btn-wizard-next', function (e) {
            //return false;//prevent clicking on steps
            //e.preventDefault();//this will prevent clicking and selecting steps
        });