javascript - Modal 需要验证字段是否已输入，并在单击提交按钮时关闭

Question

我有一个我正在处理的模式，无论出于何种原因，要么在单击提交时关闭而不验证表单字段输入，要么它会在输入时简单地重新加载表单并且永远不会消失，从而阻止我的网页被看到。我的想法是，这将在打开网页时显示，用户需要在其中输入信息，然后不受阻碍地继续访问我的网页的其余部分。我的模态表单代码如下：

<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="formModalLabel">Services Contact Form</h3>
                <button type="button" class="close" aria-label="close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="formAwesome">
                <div class="modal-body">
                    <div class="form-group row">
                        <label for="firstName" class="col-sm-6 col-form-label">
                            First name
                        </label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="firstName" placeholder="John" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="lastName" class="col-sm-6 col-form-label">
                            Last name
                        </label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="lastName" placeholder="Doe" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="email" class="col-sm-6 col-form-label">
                            E-mail address
                        </label>
                        <div class="col-sm-6">
                            <input type="email" class="form-control" id="email" placeholder="[e-mail]" required>
                        </div>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="awesomeCheck">
                        <label class="form-check-label" for="awesomeCheck">
                            Yes, I consent to contact.
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <!--<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
                    <button type="submit" class="btn btn-primary"  >Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

这是我的CSS：

<style> 
#loading-img{
display:none;
}

.response_msg{
margin-top:10px;
font-size:13px;
background:#E5D669;
color:#ffffff;
width:250px;
max-width:100%;
padding:3px;
display:none;
}


    </style> 

finally with this being my ajax query:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script> 
$(document).ready(function(){
$("#contact-form").on("submit",function(e){
e.preventDefault();
if($("#contact-form [name='your_name']").val() === '')
{
$("#contact-form [name='your_name']").css("border","1px solid red");
}
else if ($("#contact-form [name='your_email']").val() === '')
{
$("#contact-form [name='your_email']").css("border","1px solid red");
}
else
{
$("#loading-img").css("display","block");
var sendData = $( this ).serialize();
$.ajax({
type: "POST",
url: "get_response.php",
data: sendData,
success: function(data){
$("#loading-img").css("display","none");
$(".response_msg").text(data);
$(".response_msg").slideDown().fadeOut(3000);
$("#contact-form").find("input[type=text], input[type=email], textarea").val("");
}

});
}
});

$("#contact-form input").blur(function(){
var checkValue = $(this).val();
if(checkValue != '')
{
$(this).css("border","1px solid #eeeeee");
}
});
});

</style>

同样，我希望能够在单击提交时验证我的模态表单，然后关闭而无需一遍又一遍地重新打开（目前正在发生）。到目前为止，我已经尝试了以下方法：

$('#CompanyProfile').modal('hide');

然后：

<button type="button" id="close_btn" class="close" data-dismiss="modal" aria-hidden="true">
    <i class = "icons-office-52"></i> 
</button> 
    $("#close_btn").trigger("click");

然后：

$('#closemodal').click(function() {
    $('#modalwindow').modal('hide');
});

这些要么只是关闭模式，要么不允许进行验证过程。如果我问的是不可能的。我想讨论替代方案。

标签： javascripthtmljquerybootstrap-4