Есть Ajax форма в модальном окне (появляется с помощью magnific-popup). Форма рабочая (отправляем запрос, получаем ответ, очищаем поля, прячем форму, показываем успешное сообщение). Повесил валидацию (плагин jquery validation) и теперь при клике по кнопке отправить, форма отправляется с пустыми полями и появляется окошко с инфой об успешной отправке.
Это можно посмотреть тут (небольшой скролл вниз, появится slick-header и кнопка "Отправить заявку на Марс", кликаем по ней всплывает форма. Если, не заполнив поля, нажать "Отправить заявку", то все отправится, хотя не должно.
На локалке валидация работает, на сервере нет. Если повторно кликнуть по кнопке формы (в самом вверху экрана), то валидация сработает.
Помогите, пожалуйста, выявить проблему.
$("#form-1").validate({
rules: {
name: {
required: true,
minlength: 2
},
code: {
required: true,
digits: true,
minlength: 3,
maxlength: 3
},
tel: {
required: true,
digits: true,
minlength: 10
}
},
messages: {
name: {
required: "Неверно заполнено поле :(",
minlength: "Минимальное кол-во символов 2"
},
code: {
required: "Неверно заполнено поле :(",
digits: "Обязательно цифры",
minlength: "Минимальное кол-во символов 3"
},
tel: {
required: "Некоректный номер телефона :(",
digits: "Обязательно цифры",
minlength: "Минимальное кол-во символов 10"
}
}
});
$("#form-1").submit(function() {
var th = $(this);
$.ajax({
type: "POST",
url: "mail.php",
data: th.serialize()
}).done(function() {
$(".success").addClass("visible");
setTimeout(function() {
// Done Functions
th.trigger("reset");
$(".success").removeClass("visible");
}, 400);
$("#form-1").hide();
$('.mfp-bg.mfp-ready').css({
'display': 'none'
});
$('#popUpMessage').removeClass('hiddenDiv');
setTimeout(function() {
$('#popUpMessage').addClass('hiddenDiv');
}, 4000);
});
return false;
});
.form-1 {
margin: auto;
position: relative;
width: 514px;
height: auto;
background-color: white;
box-shadow: 2.5px 4.3px 38px rgba(0, 0, 1, 0.42);
font-family: $MuseoSansCyrl;
padding: 15px;
}
.border__frame {
border: 1px solid rgb(225, 225, 225);
padding: 40px 65px;
}
.heading {
font-size: 24px;
color: rgb(24, 24, 24);
font-weight: 900;
margin-bottom: 15px;
}
span {
color: rgb(226, 67, 62);
}
.description {
color: black;
font-size: 17px;
font-weight: 100;
margin-bottom: 25px;
}
input {
background-color: white;
border: 1px solid rgba(70, 70, 70, 0.2);
border-radius: 30px;
padding: 20px 30px;
display: block;
width: 100%;
max-width: 340px;
color: rgb(42, 42, 42);
font-family: $MuseoSansCyrl;
font-weight: 300;
font-size: 16px;
margin-bottom: 15px;
@include placeholder(rgb(42, 42, 42));
}
.index__phone {
background-color: white;
border: 1px solid rgba(70, 70, 70, 0.2);
border-radius: 30px;
padding: 20px;
display: inline-block;
text-align: center;
width: 100%;
max-width: 85px;
color: rgb(42, 42, 42);
font-family: $MuseoSansCyrl;
font-weight: 300;
font-size: 16px;
margin-bottom: 15px;
margin-right: 10px;
@include placeholder(rgb(42, 42, 42));
}
.number__phone {
background-color: white;
border: 1px solid rgba(70, 70, 70, 0.2);
border-radius: 30px;
padding: 20px;
display: inline-block;
text-align: left;
width: 100%;
max-width: 240px;
color: rgb(42, 42, 42);
font-family: $MuseoSansCyrl;
font-weight: 300;
font-size: 16px;
margin-bottom: 15px;
@include placeholder(rgb(42, 42, 42));
}
#popUpMessage {
margin: auto;
position: absolute;
top: 50%;
left: 30%;
height: 466px;
background-color: rgb(226, 67, 62);
box-shadow: 2.5px 4.3px 38px rgba(0, 0, 1, 0.42);
z-index: 1045;
color: white;
text-align: center;
padding: 15px;
}
.border__frame {
border: 1px solid rgb(225, 225, 225);
padding: 40px 65px;
}
.title {
color: white;
font-size: 24px;
margin-bottom: 50px;
}
figure {
margin: 0 auto 40px;
}
span {
color: white;
font-size: 17px;
display: block;
margin-bottom: 20px;
}
.hiddenDiv {
display: none;
}
//validation
label#name-error {
color: white;
position: absolute;
top: 178px;
right: -120px;
border: 1px solid red;
border-radius: 30px;
padding: 20px 10px;
width: 300px;
text-align: center;
background-color: rgb(53, 53, 53);
box-shadow: 2.5px 4.3px 21px rgba(226, 67, 62, 0.75);
}
label#tel-error {
color: white;
position: absolute;
top: 257px;
right: -120px;
border: 1px solid red;
border-radius: 30px;
padding: 20px 10px;
width: 300px;
text-align: center;
background-color: rgb(53, 53, 53);
box-shadow: 2.5px 4.3px 21px rgba(226, 67, 62, 0.75);
}
label#code-error {
display: none!important;
}
input.error {
border: 1px solid red!important;
}
input.valid {
border: 1px solid rgb(62, 189, 168)!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-1" id="form-1">
<div class="border__frame">
<div class="heading">Отправьте <span>заявку на марс!</span>
</div>
<div class="description">И наш марсианский менеджер перезвонит вам в ближйшее время.</div>
<input type="text" name="name" maxlength="30" placeholder="Ваше имя" required>
<input class="index__phone" name="code" type="tel" maxlength="3" placeholder="123" required>
<input class="number__phone" name="tel" type="tel" maxlength="10" placeholder="325-54-94" required>
<button class="btn-submit-mars" type="submit">Отправить заявку на марс</button>
</div>
</form>
<div id="popUpMessage" class="hiddenDiv">
<div class="border__frame">
<div class="title">Наши поздравления!</div>
<figure>
<img src="img/shape-rocket.png" alt="pic">
</figure>
<span>Заявка успешно отправлена на Марсоход. В ближайшее время наш менеджер свяжется с Вами </span>
</div>
</div>
Failed to parse SourceMap: http://martynuk.esy.es/css/bootstrap.css.map
Failed to parse SourceMap: http://martynuk.esy.es/js/jquery.min.map
– Alex 7 окт '16 в 22:55