4

我目前在使用这两个插件进行 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();
            }
        });
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 关心的是表单，但它对表单的影响很小：如果它可以看到输入无效，它会阻止提交事件。如果输入有效 - 它允许提交事件滑动。提交事件单到哪里？到表单的默认处理程序。现在，当您了解他们的关注点和事件的移动时，您可以看到使 Fuel UX、FormValidation 和 Ajax 一起发挥作用的系统。

下面，我提供了一个可以解决您的问题的工作代码。您可以复制它并在本地测试 - 它几乎是独立版本。您唯一需要的 - 是稳定的互联网连接 - 它使用来自不同 CDN 的 CSS 和 JS，并将 Ajax 请求发送到 stackoverflow.com（您可以更改它，使用任何站点 - 但如果您使用来自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 回答
0

为了避免在ajax响应之前改变步骤，应该注意一些细节。首先，JQuery ajax 是默认异步的，很自然地，在通过 ajax 向控制器请求之后，Fuel UX 向导不等待 ajax 响应并执行方法程序，然后等待 ajax 响应它必须使用 ajax 设置“async:false ”。对于使用 Fuel UX 向导和其中的一些方法，例如 on.('change')，我们注意到在逐步移动以避免或继续逐步移动时，我们必须为它可以理解的结果对象返回 true 或 false move 或不是。在我的示例中，我在称为“stepState”的ajax 方法之后使用了一个变量来返回 true 或 false。看看我的例子它对我有用：

$('#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
        });
于 2021-09-23T11:24:30.140 回答