Bootstrap：输入未填充时模态关闭答案

【问题标题】：Bootstrap: Modal closing while inputs not filledBootstrap：输入未填充时模态关闭
【发布时间】：2016-12-22 07:36:57
【问题描述】：

我正在使用 Bootstrap 制作模态。在未填充所需输入或未满足输入要求时，我需要防止模式关闭。我怎样才能实现输入的要求？像RegExp 这样的东西？

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Adding a user</h4>
            </div>
            <form name="userAdding">
                <div class="modal-body">
                    <input type="text" required placeholder="Name" id="inputName">
                    <br>
                    <input type="text" required placeholder="Username" id="inputUsername">
                    <br>
                    <input type="email" required placeholder="Email" id="inputEmail">
                    <br>
                    <input type="text" placeholder="Street" id="inputStreet">
                    <br>
                    <input type="text" placeholder="Suite" id="inputSuite">
                    <br>
                    <input type="text" placeholder="City" id="inputCity">
                    <br>
                    <input type="number" placeholder="Zipcode" id="inputZipcode">
                    <br>
                    <input type="number" placeholder="Lat" id="inputLat">
                    <br>
                    <input type="number" placeholder="Lng" id="inputLng">
                    <br>
                    <input type="number" placeholder="Phone" id="inputPhone">
                    <br>
                    <input type="text" placeholder="Website" id="inputWebsite">
                    <br>
                    <input type="text" required placeholder="Companyname" id="inputCompname">
                    <br>
                    <input type="text" placeholder="Catchphrase" id="inputCatchphrase">
                    <br>
                    <input type="text" placeholder="bs" id="inputBs">
                 </div>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addUser()">Submit</button>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

请分享您的addUser() 代码
它还是空的。

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

从提交按钮中删除 data-dismiss，然后我只在此处提供电子邮件。剩下的你可以这样做：

 function addUser(){
            var email = document.getElementById('inputEmail').value;
            var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            if(re.test(email)){
                $('#myModal').modal('hide');
                console.log(email + " Success");
            }else{
                console.log(email + " Failed")
            }
        }

【讨论】：

它只是验证正则表达式，如果任何其他字段的验证导致错误模型将再次关闭，因为我们只检查电子邮件正则表达式，在这种情况下我们可以执行类似这样的操作 function addUser() { $("form" ).validate({ showErrors: function (errorMap, errorList) { var errors = this.numberOfInvalids(); if (errors) { return false; } }); }

【解决方案2】：

function addUser()
{
   $("form").validate({
        showErrors: function (errorMap, errorList) {
            var errors = this.numberOfInvalids();
            if (errors) {
                return false;
             }  
        });
}

向 addUser 函数添加代码，使其限制模型在发生任何验证时隐藏。

【讨论】：

【解决方案3】：

对于您的第一个要求（不要关闭模式），您可以： 1.去掉标题中的关闭按钮， 2. 禁用页脚中的关闭按钮，直到填满所有输入。

对于后者，有多种可能性：

默认禁用按钮，然后将函数绑定到输入的change 事件。在其中，检查所有输入并相应地设置按钮状态。
在addUser() 中，检查输入的有效性。如果不正确，请使用this stackoverflow 中描述的解决方案之一取消关闭事件。

【讨论】：