У меня есть эта форма, которую пользователи должны заполнить. Если они не заполняют форму или заполняют ее неправильно, запрос 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 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">×</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>