即使没有填写表单，Bootstrap模式也会显示。

Question

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

我想通过点击 "立即下载 "按钮来正确填写表单时，显示一个bootstrap模态.bootstrap模态说 "恭喜你"。这就像一个成功的模态，说他们已经正确填写了表格。

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

我怎样才能让我的模态理解我想让它只在用户成功正确填写表格时才显示呢？我想让模态关注以下功能 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) 枝 之后 POST请求已经完成(但这真的取决于你)

$('#exampleModal').modal()

请看 https:/getbootstrap.comdocs4.4componentsmodal#via-javascript。