將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:插件的回調，從而鏈接該過程。