Код не валидирует поля формы и сразу показывает модальное окно:
'use strict';
$(document).ready(function(){
$('#FormHeader .submit, #FormFooter .submit').click(function(e) {
e.preventDefault();
var form = $(this).parent('form');
resetError(form);
if (validateForm(form)) {
$.ajax({
type: "POST",
url: "send.php",
data: form.serialize(),
success: function() {
$('#FormSend').modal();
$("#FormHeader input, #FormFooter input").val('');
}
});
e.preventDefault();
}
});
function resetError(container) {
container.find('.error').removeClass('error');
container.find('.error-message').remove();
}
function validateForm(form) {
var inputs = form.find('input'),
hasError = false;
inputs.each(function() {
if (!$.trim($(this).val())) {
showError($(this).parent('div'), 'Поле не заполнено');
hasError = true;
}
});
return !hasError;
}
function showError(container, errorMessage) {
container.addClass('error');
var msgElem = document.createElement('span');
msgElem.className = "error-message";
msgElem.innerHTML = errorMessage;
container.append(msgElem);
}
});
PHP
<?php
if (!empty($_POST['name']) && !empty($_POST['phone'])) {
$name = trim(strip_tags($_POST['name']));
$phone = trim(strip_tags($_POST['phone']));
$to = '[email protected]';
$subject = 'text';
$message = "<p>Имя: $name</p><p>Телефон: $phone</p>";
$headers = "From: $email\r\nReply-to: $email\r\nContent-type:text/html; charset=utf-8\r\n";
mail($to, $subject, $message, $headers);
}
HTML
<form id="FormHeader">
<div class="form-control">
<label for="Name" hidden="">Имя</label>
<input id="Name" type="text" placeholder="Имя" name="name" required="">
</div>
<div class="form-control">
<label for="Phone" hidden="">Телефон</label>
<input id="Phone" type="tel" placeholder="Контактный телефон" name="phone" required="">
</div>
<button type="submit" name="submit" class="btn btn-brand submit" data-toggle="modal">Оставить заявку</button>
</div>
</form>