Bootstrap 即使表单未填写，模态也会显示

Question

我有这张表格，用户必须填写。当他们没有填写表格或填写不正确时，请求 POST 不会加载。请求 post 允许我保存他们的姓名和电子邮件。

我想在通过单击按钮 "Download now" 正确填写表单时显示 bootstrap 模式。 bootstrap 模态说 "Congratulations." 这就像一个成功模态说他们已经正确填写了表格。

但我有一个问题：当表单中没有填写任何内容或填写不正确时，当我单击按钮 "Download now" 时，模式仍然显示。

如何让我的模式理解我希望它仅在用户成功正确填写表单时显示？我希望模式在单击按钮 "Download now".

之前显示功能 formValidation()

HTML 代码：

<form name="myForm" style="width:100%;" id="submit_request_form" enctype="multipart/form-data" onsubmit="return submitClick();">
    <div class="form-group">
        <label>First and last name:</label>
        <input type="text" class="form-control" id="id_name" name="user_name" placeholder="Enter first & last name" required>
    </div>
    <div class="form-group">
        <label>Email address:</label>
        <input type="email" id="id_email" name="user_email" class="form-control" placeholder="Enter email" required>
        <small class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Download&nbsp;now</button>
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-success" role="alert">
                            Congratulations. You will receive an email in few minutes!
                        </div>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
</form>

Javascript:

<script>
function submitClick() {
    if (formValidation() == true) {
        //POST REQUEST
        return true;
    } else {
        return false;
    }
}
function formValidation() {

    if (document.myForm.user_name.value == "") {
    alert("Please fill in your Name!");
    return false;
    }

    // Validate length of the Name LastName
    else if ((document.myForm.user_name.value.length) > 50) {
    alert("The name is too long!");
    return false;
    }

    // Validate emails
    else if (!/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(myForm.user_email.value)) //Regular expressions to validate email
    {
    alert("Enter Valid Email Address!");
    return false;
    }

    return true;
}
</script>

Answer 1

您必须以编程方式显示模态，而不是依赖 data-toggle="modal" data-target="#exampleModal" 的自动行为。

删除按钮上的 data-toggle 和 data-target 属性并将其添加到 submitClick 函数的 if (formValidation() == true) 分支的某处，最好是 after POST 请求已完成（但这完全取决于您）

$('#exampleModal').modal()

见https://getbootstrap.com/docs/4.4/components/modal/#via-javascript

Bootstrap 即使表单未填写，模态也会显示

Bootstrap modal is showing even if the form is not filled

html

javascript

bootstrap-modal