JavaScript
Код: Выделить всё
! function() {
$(document).ready(function() {
$("#callForm").submit(function(e) {
e.preventDefault();
var s = this,
a = $(this).serialize();
$.ajax({
type: "POST",
url: "/reg.html",
data: a
});
for (var r = 0; r < s.length - 1; r++) s[r].value = "";
$("#alertSuccess").css("display", "block")
})
})
}(),
function() {
$(document).ready(function() {
$("#regForm").submit(function(e) {
e.preventDefault();
var s = !0,
a = this,
r = $(this).serialize();
$("#alertRegError").css("display", "none"), $("#regForm input").each(function(e) {
var a = $(this).parents(".form-group"),
r = a.find(".glyphicon");
this.checkValidity() ? (a.addClass("has-success").removeClass("has-error"), r.addClass("glyphicon-ok").removeClass("glyphicon-remove")) : (a.addClass("has-error").removeClass("has-success"), r.addClass("glyphicon-remove").removeClass("glyphicon-ok"), s = !1)
}), $("#regForm select").each(function(e) {
var a = $(this).parents(".form-group"),
r = a.find(".glyphicon");
this.checkValidity() ? (a.addClass("has-success").removeClass("has-error"), r.addClass("glyphicon-ok").removeClass("glyphicon-remove")) : (a.addClass("has-error").removeClass("has-success"), r.addClass("glyphicon-remove").removeClass("glyphicon-ok"), s = !1)
});
var o = $("#regForm #licenseDateMonth"),
l = $("#regForm #licenseDateDay"),
c = $("#regForm #licenseDateYear"),
n = !1;
o[0].checkValidity() || (n = !0), l[0].checkValidity() || (n = !0), c[0].checkValidity() || (n = !0), n ? (l.parents(".form-group").addClass("has-error").removeClass("has-success"), l.parents(".form-group").find(".glyphicon").addClass("glyphicon-remove").removeClass("glyphicon-ok"), s = !1) : (l.parents(".form-group").addClass("has-success").removeClass("has-error"), l.parents(".form-group").find(".glyphicon").addClass("glyphicon-ok").removeClass("glyphicon-remove"));
var t = $("#phone"),
i = /^(\+380)\d{9}/,
p = t.val().replace(/ /g, "").replace(/-/g, "").replace(/\(/g, "").replace(/\./g, "").replace(/\)/g, "");
if (i.test(p) && 13 == p.length ? (t.parents(".form-group").addClass("has-success").removeClass("has-error"), t.parents(".form-group").find(".glyphicon").addClass("glyphicon-ok").removeClass("glyphicon-remove")) : (t.parents(".form-group").addClass("has-error").removeClass("has-success"), t.parents(".form-group").find(".glyphicon").addClass("glyphicon-remove").removeClass("glyphicon-ok"), s = !1), !s) return $("#alertRegError").css("display", "block"), !1;
$.ajax({
type: "POST",
url: "/reg.html",
data: r
});
for (var h = 0; h < a.length - 1; h++) a[h].value = "", a[h].checked = !1;
$("#alertRegSuccess").css("display", "block")
})
})
}(),
function() {
$(function() {
var e, s = {
linkToTop: 0,
linkToRegForm: $("#registration-form")[0].offsetTop,
linkToInfo: $("#info")[0].offsetTop,
linkToContacts: $("#contacts")[0].offsetTop
},
a = {
1: 100,
2: 80,
3: 70
},
r = $(document).width();
e = r < 768 ? 3 : r < 992 ? 2 : 1, $("a[link-to]").click(function(r) {
$("html, body").animate({
scrollTop: s[$(this).attr("link-to")] - a[e]
}, 1500), "true" == $("#navbar").attr("aria-expanded") && $("#burger-btn").click()
})
})
}(),
function() {
$(function() {
var e = $(".tab"),
s = $(".tab-content");
e.click(function(a) {
var r = $(a.currentTarget),
o = $(a.target).attr("target"),
l = $(o);
e.removeClass("active"), r.addClass("active"), s.removeClass("active"), l.addClass("active")
});
var a = $("#callPhone"),
r = !0;
a.on("focus", function() {
r && (a.val("+380"), r = !1)
});
var o = $("#phone"),
l = !0;
o.on("focus", function() {
l && (o.val("+380"), l = !1)
})
})
}();
Код: Выделить всё
<form id="regForm" class="form-horizontal" novalidate>
<div class="col-sm-12">
<div class="col-sm-6">
<h3 class="center">Личные данные</h3>
<div class="form-group has-feedback">
<label for="city" class="col-sm-6 control-label">Город*</label>
<div class="col-sm-5 no-padding">
<select class="form-control" id="city" name="city" required>
<option value=""> </option>
<option value="Киев">Киев</option>
<option value="Одесса">Одесса</option>
<option value="Харьков">Харьков</option>
<option value="Львов">Львов</option>
<option value="Днепр">Днепр</option>
<option value="Запорожье">Запорожье (предварительное оформление)</option>
</select>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group has-feedback">
<label for="fio" class="col-sm-6 control-label">ФИО*</label>
<div class="col-sm-5 no-padding">
<input type="text" class="form-control" id="fio" name="fio" placeholder="Петров Петр Петрович" required>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group has-feedback">
<label for="phone" class="col-sm-6 control-label">Телефон*</label>
<div class="col-sm-5 no-padding">
<input type="text" class="form-control" id="phone" name="phone" placeholder="+380 12 345 67 89" required>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group has-feedback">
<label for="mail" class="col-sm-6 control-label">Е-mail*</label>
<div class="col-sm-5 no-padding">
<input type="email" class="form-control" id="mail" name="mail" placeholder="petrov@mail.com" required>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group has-feedback">
<label for="license" class="col-sm-6 control-label">Серия и номер в/у*</label>
<div class="col-sm-5 no-padding">
<input type="text" class="form-control" id="license" name="license" placeholder="AAB123456" required>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group has-feedback">
<label for="licenseDateMonth" class="col-sm-6 control-label">Дата выдачи в/у*</label>
<div class="col-sm-5 no-padding">
<div class="col-xs-3 no-padding date-form">
<select class="form-control" id="licenseDateDay" name="licenseDateDay" required>
<option value=""> </option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="col-xs-3 no-padding date-form">
<select class="form-control" id="licenseDateMonth" name="licenseDateMonth" required>
<option value=""> </option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="col-xs-6 no-padding date-form">
<select class="form-control" id="licenseDateYear" name="licenseDateYear" required>
<option value=""> </option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<h3 class="center">Транспортное средство</h3>
<div class="form-group has-feedback">
<label for="carName" class="col-sm-6 control-label">Марка и модель*</label>
<div class="col-sm-5 no-padding">
<input type="text" class="form-control" id="carName" name="carName" placeholder="Mercedes-Benz S-class" required>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group has-feedback">
<label for="carBirth" class="col-sm-6 control-label">Год выпуска*</label>
<div class="col-sm-5 no-padding">
<select class="form-control" id="carBirth" name="carBirth" required>
<option value=""> </option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group has-feedback">
<label for="carColor" class="col-sm-6 control-label">Цвет*</label>
<div class="col-sm-5 no-padding">
<input type="text" class="form-control" id="carColor" name="carColor" placeholder="Серебристый металлик" required>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group has-feedback">
<label for="carNumber" class="col-sm-6 control-label">Гос номер*</label>
<div class="col-sm-5 no-padding">
<input type="text" class="form-control" id="carNumber" name="carNumber" placeholder="AA1234BB" required>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group has-feedback">
<label for="carType" class="col-sm-6 control-label">Тип автомобиля*</label>
<div class="col-sm-5 no-padding">
<select class="form-control" id="carType" name="carType" required>
<option value=""> </option>
<option value="Седан">Седан</option>
<option value="Универсал">Универсал</option>
<option value="Микроавтобус">Микроавтобус</option>
<option value="Хетчбэк">Хетчбэк</option>
<option value="Минивен">Минивэн</option>
</select>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<h3 class="center">Дополнительные услуги</h3>
<div class="col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox" name="conditioner" value="true">
Кондиционер
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="delivery" value="true">
Доставка
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="6seats" value="true">
6 мест
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="check" value="true">
Чек
</label>
</div>
</div>
<div class="col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox" name="animals" value="true">
Перевоз животных
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="childChair" value="true">
Детское кресло
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="smoking" value="true">
Курение в салоне
</label>
</div>
</div>
</div>
<div class="col-sm-6">
<h3 class="center">Ваш комментарий</h3>
<textarea rows="4" name="comment"></textarea>
<div class="col-sm-12 no-padding">
<button type="submit">Отправить регистрационную форму</button>
</div>
<div class="col-sm-12 hint">
* обязательные для заполнения поля!
</div>
<div id="alertRegSuccess" class="col-sm-12 alerts alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
Запрос успешно отправлен!
</div>
<div id="alertRegError" class="col-sm-12 alerts alert alert-danger">
Запрос не отправлен!<br>
Пожалуйста коректно заполните все обязательные поля!
</div>
</div>
</form>