即使未填写表单，也会显示引导模式答案

【问题标题】：Bootstrap modal is showing even if the form is not filled即使未填写表单，也会显示引导模式
【发布时间】：2020-05-08 07:11:13
【问题描述】：

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

我想通过单击“立即下载”按钮正确填写表单时显示引导模式。引导模式显示“恭喜”。说他们已正确填写表格就像一个成功的模式。

但是我有一个问题：当表单中没有填写任何内容或未正确填写时，当我单击“立即下载”按钮时，模式仍然显示。

如何让我的模态理解我希望它仅在用户成功填写表单时才显示？我希望模态在单击“立即下载”按钮时显示之前注意函数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>

【问题讨论】：

标签： javascript html bootstrap-modal

【解决方案1】：

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

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

$('#exampleModal').modal()

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

【讨论】：