Как сделать валидацию формы с всплывающим уведомлением?

Question

Как сделать валидацию для полей, допустим если в поле Имя введено 2 слова, то всплывает такое оповещение?

Скрин:

(css для оповещения добавил)

function validateForm() {
        $('.call-form button[type="submit"').click(function(e) {
            e.preventDefault();
            var name = $("#formNameCall");
            var email = $("#formEmailCall");
            var phone = $("#formPhoneCall");
            var nameVal = $("#formNameCall").val();
            var emailVal = $("#formEmailCall").val();
            var phoneVal = $("#formPhoneCall").val();

            if(nameVal.length > 2 && emailVal.length > 5 && phoneVal.length > 5) {
            var $data;
            $data = $(this).parent('form').serialize();
            $(".modal").addClass('modal--visible');
            $.ajax({
            url: 'test.ru',
            type: 'post',
            data: $data
        });
            }
            if(nameVal.length < 2) {
                name.css({'box-shadow':'inset 0 0 10px red'});
            } else {
                name.css({'box-shadow':'none'});
            }

            if(emailVal.length < 5){
                email.css({'box-shadow':'inset 0 0 10px red'});
            } else {
                email.css({'box-shadow':'none'});
            }

            if(phoneVal.length < 5){
                phone.css({'box-shadow':'inset 0 0 10px red'});
            }else {
                phone.css({'box-shadow':'none'});
            }

        });
    }

.error {
position: absolute;
    z-index: 9;
    display: none;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background: #D9585C;
    color: #fff;
    text-align: center;
}

<form id="ltForm1241541"  class="call-form" action="https://virilisgk.getcourse.ru/pl/lite/block-public/process-html?id=747751498" method="post" data-open-new-window="0"><input type="hidden" name="formParams[setted_offer_id]" >
                            <input id="formNameCall" type="text" maxlength="60"  placeholder="* Имя" name="formParams[full_name]" value=""><br>
                            <input id="formEmailCall" type="text" maxlength="60"  placeholder="* Email" name="formParams[email]" value="" ><br>
                            <input id="formPhoneCall" type="text" maxlength="60"  placeholder="* Номер телефона" name="formParams[phone]" value=""><br>
                            <button type="submit"
                                    id="button6556653" class="button"  onclick="if(window['btnprs5ee8a82e27f98']){return false;}window['btnprs5ee8a82e27f98']=true;setTimeout(function(){window['btnprs5ee8a82e27f98']=false},6000);return true;">
                                Записаться</button><br>
                            <input type="hidden" id="2159905ee8a82e221a2" name="__gc__internal__form__helper" class="__gc__internal__form__helper" value="">
                            <input type="hidden" id="2159905ee8a82e221a2ref" name="__gc__internal__form__helper_ref" class="__gc__internal__form__helper_ref" value="">
                            <input type="hidden" name="requestTime" value="1592305710">
                            <input type="hidden" name="requestSimpleSign" value="6b442c8f44be7b60dc76ddf42c651c58">
                            <input type="hidden" name="isHtmlWidget" value="1"/></form>

Answer 1

Вам будет достаточно добавить еще одно условие в Ваш код:

if (nameVal.trim().split(" ").length === 2) {
    name.css({"box-shadow": "inset 0 0 10px red"})
}

Методы, которые тут использованы:

trim() - убирает возможные "whitespace" в начале и в конце значения nameVal;

split() - делит изначальную строку на отдельные строки, где (" ") означает - разделить в том месте где есть разрыв;

length - возвращает длину массива, т.е количество отдельных строк.

БЛОГ НА HUSL

Как сделать валидацию формы с всплывающим уведомлением?

Ответы (1 шт):