Валидация форм перед отправкой

161
24 декабря 2019, 13:10

Есть код, вообще не получается поставить валидацию, т.е. он есть стандартный, но все-равно отправляет и без заполненных форм, как это можно решить?

<form id="myForm">
        <div class="field-block" style="font-size:14px">
            <input id="LASTNAME" class="field" name="LASTNAME" required type="text" placeholder="Фамилия">
        </div>
                <div class="field-block" style="font-size:14px">
            <input id="FIRSTNAME" class="field" name="FIRSTNAME" required type="text" placeholder="Имя">
        </div>
                <div class="field-block" style="font-size:14px">
            <input id="PARENTNAME" class="field" name="PARENTNAME" required type="text" placeholder="Отчество">
        </div>
            <div class="field-block" style="font-size:14px">
                        <input id="PHONE" class="field phone" name="PHONE" type="text" placeholder="Номер телефона без +7">
        </div>
            <div class="field-block" style="font-size:14px">
                        <input id="BIRTHDAY" class="field date" name="BIRTHDAY" required type="text" data-mask="00/00/0000" placeholder="Дата рождения">
        </div>
            <div class="field-block" style="font-size:14px">
            <input id="check" name="check" checked type="checkbox">
            <span class="check-text">Я добровольно отправляю свои данные</span>
        </div>
        <button id="button1" onclick="validate(this.form)" class="t-btn" type="button" style="color:#ffffff;background-color:#df2322;border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px;"><table style="width:100%; height:100%;"><tbody><tr><td>Оформить онлайн</td></tr></tbody></table></button>
    </form>
    <script>
    $(function() {
        $("#button1").click(function() {

 var formData = {
                "LASTNAME":$("#LASTNAME").val()
                , "FIRSTNAME":$("#FIRSTNAME").val()
                  , "PARENTNAME":$("#PARENTNAME").val()
                    , "PHONE":$("#PHONE").val()
                      , "BIRTHDAY":$("#BIRTHDAY").val()
            };

            $.ajax({
                url:'register.php'
                , type:'POST'
                , data: JSON.stringify(formData)
                , success: function(res) {
                    var jsonResult = JSON.parse(res);
                    if(jsonResult.hasOwnProperty("error")){
                                                ($(".cover2").css("display", "block"));
                        ($(".modal2").css("display", "block"));
                        ($(".content2").css("display", "block"));
                        setTimeout('document.location.href="#";', 5000);
                    }
                    if(jsonResult.hasOwnProperty("message")){
                        ($(".cover").css("display", "block"));
                        ($(".modal").css("display", "block"));
                        ($(".content").css("display", "block"));
                        setTimeout('document.location.href="#";', 5000);
                    }
                }
            });
            return false;
        });
    });

Answer 1
<form id="myForm">
    <div class="field-block" style="font-size:14px">
        <input id="LASTNAME" class="field" name="LASTNAME" required type="text" placeholder="Фамилия">
    </div>
    <div class="field-block" style="font-size:14px">
        <input id="FIRSTNAME" class="field" name="FIRSTNAME" required type="text" placeholder="Имя">
    </div>
    <div class="field-block" style="font-size:14px">
        <input id="PARENTNAME" class="field" name="PARENTNAME" required type="text" placeholder="Отчество">
    </div>
    <div class="field-block" style="font-size:14px">
        <input id="PHONE" class="field phone" name="PHONE" type="text" placeholder="Номер телефона без +7">
    </div>
    <div class="field-block" style="font-size:14px">
        <input id="BIRTHDAY" class="field date" name="BIRTHDAY" required="true" type="text" data-mask="00/00/0000" placeholder="Дата рождения">
    </div>
    <div class="field-block" style="font-size:14px">
        <input id="check" name="check" checked type="checkbox">
        <span class="check-text">Я добровольно отправляю свои данные</span>
    </div>
    <input id="button1" class="t-btn" type="submit" style="color:#ffffff;background-color:#df2322;border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px;">
</form>
<script>
    jQuery(function() {
        $("#myForm").submit(function() {
            var formData = {
            "LASTNAME":$("#LASTNAME").val()
            , "FIRSTNAME":$("#FIRSTNAME").val()
              , "PARENTNAME":$("#PARENTNAME").val()
                , "PHONE":$("#PHONE").val()
                  , "BIRTHDAY":$("#BIRTHDAY").val()
            };
            $.ajax({
                url:'register.php'
                , type:'POST'
                , data: JSON.stringify(formData)
                , success: function(res) {
                    var jsonResult = JSON.parse(res);
                    if(jsonResult.hasOwnProperty("error")){
                                                ($(".cover2").css("display", "block"));
                        ($(".modal2").css("display", "block"));
                        ($(".content2").css("display", "block"));
                        setTimeout('document.location.href="#";', 5000);
                    }
                    if(jsonResult.hasOwnProperty("message")){
                        ($(".cover").css("display", "block"));
                        ($(".modal").css("display", "block"));
                        ($(".content").css("display", "block"));
                        setTimeout('document.location.href="#";', 5000);
                    }
                }
            });
            return false;
        });
    });
</script>

Перед скриптом, естественно, не забыть про добавление самой библиотеки jquery.

READ ALSO
Форматирование полученных данных в jquery

Форматирование полученных данных в jquery

Есть у меня маска для поля input

127
Задержка при следующим each

Задержка при следующим each

Как сделать, чтобы переходил к следующей форме через 2 секунды?

134
JS / JQuery Найти индекс массива в объекте

JS / JQuery Найти индекс массива в объекте

Есть следующий объект: subcats = {20: [49, 50, 51], 16: [54, 55]};

119
Как сделать плавное выпадающее меню?

Как сделать плавное выпадающее меню?

Помогите, пожалуйста, сделать плавное выпадающее менюКод ниже работает, но дропдаун не анимированный

111