将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代码段：

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

但是，当我尝试单击“ 继续执行第3步”按钮时，什么也不会发生。 甚至没有错误！

我试图更改按钮以及JS的行为。 如果我将按钮从“ 提交”更改为“普通”按钮，则为删除表单验证部分，那么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:内调用该函数success:插件的回调，从而链接该过程。