Fuelux wizard and formvalidation.io - an ajax

本文关键字：an ajax io formvalidation wizard and Fuelux 更新时间：2023-09-26

我目前在使用这两个插件进行 ajax 提交工作时遇到了一些麻烦，有谁知道它应该是什么样子？因为现在它提交没有 ajax 部分给 self - 与执行相同的地址。我真的不知道 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();
            }
        });

你的问题是矮人要塞级别的乐趣。尽管如此（或者正因为如此？），玩起来还是很愉快的。

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

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关注的是表单，但它对它们的影响非常温和：如果它可以看到输入无效，它就会阻止提交事件。如果输入有效 - 则允许提交事件滑动。提交事件滑到哪里？窗体的默认处理程序。现在，当你了解他们的关注点和事件的移动时，你可以看到将使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>

为了避免在

ajax响应之前更改步骤，应该注意一些细节。首先，JQuery ajax 是默认异步的，很自然地，在 ajax 向控制器请求后，Fuel UX 向导不会等待 ajax 响应并执行方法过程，然后为了等待 ajax 响应，它必须使用 ajax 设置"async：false"。例如，用于使用燃料UX向导和其中的一些方法。（"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
        });