将 formValidation 插件与另一个函数混合

Question

我使用formValidation 插件来验证我的表单，并且我正在尝试使用 jQuery 构建一个向导。这是我的第一个表格：

<div id="dynamicContent">
<form id="myForm1" method="post" class="form-horizontal" autocomplete="off">
    <div class="form-group">
        <input type="text" name="name" class="form-control" placeholder="First name">
        </div>
    </div>
    <div class="form-group">
        <input type="text" name="surname" class="form-control" placeholder="Last name">
        </div>
    </div>
    <button type="submit" class="btn btn-success btn-sm"> Proceed to step 2 </button>
</form>
</div>  

（我正在尝试控制 dynamicContent div 的内容）

这是第一步的JS sn-p：

    $(document).ready(function() {
    $('#myForm1').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: 'Please specify user first name.'
                    }
                }
            },
            surname: {
                validators: {
                    notEmpty: {
                        message: 'Please specify user last name.'
                    }
                }
            }
        }
    })
    .on('success.form.fv', function(e) {
        // Prevent form submission
        e.preventDefault();

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

        // Use Ajax to submit form data
        $.ajax({
            url: 'step2.php',
            type: 'POST',
            data: $form.serialize(),
            success: function(result) {
                $('#dynamicContent').html(result);
            }
        });
    });
});

此代码按预期工作。现在这是第二步文件：

PHP（html 文件）：

<?php 
echo "Welcome, ".$_POST["name"]." ".$_POST["surname"];
?>
<form id="myForm2" method="post" class="form-horizontal" autocomplete="off">
    <div class="form-group">
        <input type="text" name="address" class="form-control" placeholder="Address">
        </div>
    </div>
    <div class="form-group">
        <input type="text" name="city" class="form-control" placeholder="City">
        </div>
    </div>
    <div class="form-group">
        <input type="text" name="province" class="form-control" placeholder="Province">
        </div>
    </div>
    <div class="form-group">
        <input type="text" name="postalcode" class="form-control" placeholder="Postal code">
        </div>
    </div>
    <button type="submit" class="btn btn-success btn-sm"> Proceed to step 3 </button>
</form>

这是第二步的js文件：

    $(document).ready(function() {
    $('#myForm2').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            address: {
                validators: {
                    notEmpty: {
                        message: 'Please specify address.'
                    }
                }
            },
            city: {
                validators: {
                    notEmpty: {
                        message: 'Please specify city.'
                    }
                }
            },
            province: {
                validators: {
                    notEmpty: {
                        message: 'Please specify province.'
                    }
                }
            },
            postalcode: {
                validators: {
                    notEmpty: {
                        message: 'Please specify postal code.'
                    }
                }
            }
        }
    })
    .on('success.form.fv', function(e) {
        // Prevent form submission
        e.preventDefault();

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

        // Use Ajax to submit form data
        $.ajax({
            url: 'step3.php',
            type: 'POST',
            data: $form.serialize(),
            success: function(result) {
                $('#dynamicContent').html(result);
            }
        });
    });
});

但是当我尝试点击Proceed to step 3按钮时，什么都不会发生。甚至没有错误！

我试图改变按钮的行为，以及 JS。如果我将按钮从 submit 更改为普通按钮删除表单验证部分，Ajax 将工作。

<input type="button" onclick="sendForm();" class="btn btn-success btn-sm" value="Send it this way">
function sendForm()
{
    $.ajax({
        url: 'step3.php',
        type: 'POST',
        data: $form.serialize(),
        success: function(result) {
            $('#dynamicContent').html(result);
        }
    });
}

我不在乎是否将按钮从提交更改为普通输入类型，但表单验证很重要。我怎样才能让它工作？

Answer 1

我认为您的问题是您没有为第二页运行 JavaScript。 Ajax 完成后不会触发第二个就绪事件，因此您需要有一种方法来注册您的插件而不依赖于$(doucment).ready。尝试使用：

$(document).ajaxComplete(function() {
$('#myForm2').formValidation({
    framework: 'bootstrap',
...

请注意，它不在通过您的网站加载的 .js 文件中，因为 每次 ajax 调用完成时都会调用它。更好的方法可能是将您的初始化放入一个函数（非匿名函数）并从插件的success: 回调中调用它，从而链接该过程。