Добавить валидацию checkbox в чужой код

Вопросы по вёрстке и JavaScript
Ответить
Аватара пользователя
Introvert
Сообщения: 139
Зарегистрирован: 2017.07.04, 13:42
Откуда: Украина, Киев

Добавить валидацию checkbox в чужой код

Сообщение Introvert »

Здравствуйте, как добавить валидацию checkbox в чужой скрипт? Очень нужно. checkbox - принятие условия лицензионного соглашения, если не поставил, форма не пройдет и красным так же подсветит. Взято с сайта: http://taxiya.kiev.ua/
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)
        })
    })
}();
HTML

Код: Выделить всё

<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">&times;</a>
                Запрос успешно отправлен!
              </div>
              <div id="alertRegError" class="col-sm-12 alerts alert alert-danger">
                Запрос не отправлен!<br>
                Пожалуйста коректно заполните все обязательные поля!
              </div> 
            </div>
          </form>
Пишу социальную сеть заявок для фирм.
Аватара пользователя
Introvert
Сообщения: 139
Зарегистрирован: 2017.07.04, 13:42
Откуда: Украина, Киев

Re: Добавить валидацию checkbox в чужой код

Сообщение Introvert »

Разобрался. Если кому надо, чтобы добавить валидацию чекбоксов к этой форме(с подсветкой, красный и зеленый текст, если отмечен)
P.S. Внизу видно дублировал код, просто убрал обязательное поле для мыла. Не лучший вариант, но работает.
Переделал 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 #zakon').each(function(e) {     
					if(this.checkValidity() && $("#zakon").is(":checked")) {
					 $("#zakon_text").css('color', 'green');  
					}
					else {
					  var a = $("#zakon_text").css('color', 'red');
					  s = !1;
					}
				}),
                $('#regForm #zakon2').each(function(e) {     
					if(this.checkValidity() && $("#zakon2").is(":checked")) {
					 $("#zakon2_text").css('color', 'green');  
					}
					else {
					  var a = $("#zakon2_text").css('color', 'red');
					  s = !1;
					}
				}),		
			    $("#regForm #fio").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 #license").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 #carName").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 #carColor").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 #carNumber").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 #zakon2").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)
        })
    })
}();
Пишу социальную сеть заявок для фирм.
Ответить