Question

我实现了一个名为Bootstrap Form Wizard的插件。有人用吗？

我正在进行使用bootstrap的项目并创建一些表单向导来创建事务。但是，表单向导验证根本不起作用。

这是我执行向导的语法

功能验证

function validateText(el) {
var name = el.val();
var retValue = {};

if (name == "") {
    retValue.status = false;
    retValue.msg = "Please enter a name";
}
else {
    retValue.status = true;
}

return retValue;

}

我的表单向导

    wizard.on("submit", function(wizard) {
            $.ajax({
                url: "functions/savetransaction.php",
                type: "POST",
                data: wizard.serialize(),
                success: function() {
                    wizard.submitSuccess(); // displays the success card
                    wizard.hideButtons(); // hides the next and back buttons
                    wizard.updateProgressBar(0); // sets the progress meter to 0
                    //wizard.reset();
                },
                error: function() {
                    wizard.submitError(); // display the error card
                    wizard.hideButtons(); // hides the next and back buttons
                }
            }); //end ajax wizard
        }); //end submit wizard 

        wizard.on("reset", function(wizard) {
            $.each(wizard.cards, function(name, card) {
                card.el.find("input").val(""); // resets all inputs on a card to ""
            });
        });

        wizard.el.find(".wizard-success .im-done").click(function() {
            //rest all if clicked
            resetForm();
            wizard.reset().close();
        });

        wizard.el.find(".wizard-success .create-another-trn").click(function() {
            resetForm();
            wizard.reset();
        });

最后是HTML

<div class="wizard-card" data-cardname="card2">
        <h3>User Accounts</h3>
        <label>User</label>
        <input type="text" placeholder="user" id="add_trc_user" name="user" required="true" maxlength="45" data-validate="validateText"/>

这里有人知道我的问题吗？

Answer 1

我只是尝试重现您的问题，但以下代码适用于我（几乎所有从您的基本代码复制）。

<!DOCTYPE html>
<html>
<head>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="bootstrap-wizard.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap-wizard.min.js"></script>
</head>
<body>
    <div id="wizard" class="wizard">
        <div class="wizard-card" data-cardname="card2">
            <h3>User Accounts</h3>
            <label>User</label>
            <input type="text" placeholder="user" id="add_trc_user" name="user" required="true" maxlength="45" data-validate="validateText"/>
        </div>
    </div>

    <script type="text/javascript">
    $(function(){
        var wizard = $('#wizard').wizard();
        wizard.show();

        wizard.on("submit", function(wizard) {
            $.ajax({
                url: "functions/savetransaction.php",
                type: "POST",
                data: wizard.serialize(),
                success: function() {
                    wizard.submitSuccess(); // displays the success card
                    wizard.hideButtons(); // hides the next and back buttons
                    wizard.updateProgressBar(0); // sets the progress meter to 0
                    //wizard.reset();
                },
                error: function() {
                    wizard.submitError(); // display the error card
                    wizard.hideButtons(); // hides the next and back buttons
                }
            }); //end ajax wizard
        }); //end submit wizard 

        wizard.on("reset", function(wizard) {
            $.each(wizard.cards, function(name, card) {
                card.el.find("input").val(""); // resets all inputs on a card to ""
            });
        });

        wizard.el.find(".wizard-success .im-done").click(function() {
            //rest all if clicked
            resetForm();
            wizard.reset().close();
        });

        wizard.el.find(".wizard-success .create-another-trn").click(function() {
            resetForm();
            wizard.reset();
        });


    });

 function validateText(el) {
    var name = el.val();
    var retValue = {};

    if (name == "") {
        retValue.status = false;
        retValue.msg = "Please enter a name";
    }
    else {
        retValue.status = true;
    }

    return retValue;
}
</script>
</body>
</html>

Bootstrap表单向导，验证错误

1 个答案: