Question

我正在使用从http://bootboxjs.com/下载的bootbox。 user_update.php使用ajax加载到users.php中的div中。在user_update.php中我有一个javascript函数validateForm（），并且在同一个文档的下面我有这样的形式，就像这样调用这个函数：

<form name= "updateForm" onsubmit="return validateForm()" role="form-horizontal" method="post" action="index.php">

bootbox.alert函数运行正常。

当我使用bootbox.confirm时，我会在十分之几秒内看到对话框的打开和关闭。

if (roleid != prevroleid) {
    bootbox.confirm("Are you sure?", function (result) {
        if (result) {
            console.log("User confirmed dialog");
        } else {
            console.log("User declined dialog");
        }
    });
}

当我在未使用ajax加载div的div中测试相同的函数时，bootbox.confirm按预期工作。

EDITED 这是ajax电话：

$(document).on("click", ".gebruiker", function (e) {
    e.preventDefault();
    //var url = "user_update.php";
    //$("#details").load(url)
    var idnr = $(this).attr('idnr');

    $.ajax({
        type: "get",
        url: "view/user_update.php",
        data: {
            variable1: idnr
        },
        success: function (data) {
            //do stuff after the AJAX calls successfully completes
            $('#details').html(data);

        }
    });
});

这是它加载的div

<div id="details" class="col-md-6">         
</div>

在16:43添加按要求验证ValidateFormcode：

<script>
    function validateForm()
    {
        var fullname = $('#fullname').val();
        var username = $('#username').val();
        var role = document.getElementById("role");
        var roleid = role.options[role.selectedIndex].value;

        var password1 = $('#password1').val();
        var password2 = $('#password2').val();
        var prevroleid = $('#prevroleid').val();


        if (roleid != prevroleid) {
bootbox.confirm("Are you sure?", function (result) {
    if (result) {
        console.log("User confirmed dialog");
    } else {
        console.log("User declined dialog");
    }
});

}

        if (!fullname)
        {
        bootbox.alert("Het veld 'Naam' mag niet leeg zijn")
        return false;
      }
      if (!username)
        {
        bootbox.alert("Het veld 'Gebruikersnaam' mag niet leeg zijn")
        return false;
      }

      if(password1 != password2)
      {
        bootbox.alert("De waardes in de wachtwoord velden komen niet overeen")
        return false;
      }


    }       
</script>

Answer 1

您应该在未经过验证时阻止表单的默认行为。

所以validateForm应该是这样的：

function validateForm(e)
{
 var valid = false; // do some validation
 if(!valid){
  e.preventDefault();
 }
}

然后提交表单并刷新页面，从而关闭确认对话框。

Answer 2

而不是使用onsubmit =＆＃34;返回validateForm（）＆＃34;表单标记中的属性。将它放在表单的提交按钮上，如onclick =＆＃34; return validateForm（）; return false;＆＃34;

<input type="submit" onclick="return validateForm();return false;" />

从validateForm（）函数返回true / false。如果返回true，那么如果不提交错误的表格，则表格将被提交给其他人。

试试吧。它应该工作。

在ajax加载的div中，bootbox.confirm会立即打开和关闭

2 个答案: