Валидация формы обратной связи

@sweelemk · Регистрация: 16.09.2013

Студворк — интернет-сервис помощи студентам

Доброго дня! Делаю форму обратной связи и столкнулся с 2 проблема:

1) валидация номера телефона

JavaScript
1
2
3
4
5
6
7
8
9
10
11
case 'cont_phone':
                    var cont_phone = /^([0-9])/;
                           if(val != '' && cont_phone.test(val))
                           {
                              $(this).addClass('not_error').css('border',bcolorGreen);
                           }
                           else
                           {
                              $(this).removeClass('not_error').addClass('error').css('border',bcolorRed);
                    }
                    break;

не работает скрипт... именно не сверяет с цифрами.

2) как сделать, чтобы при нажатии кнопки "отправить" проверялось на заполнение все поля и если одно из них не заполнено - выдавалось ошибка?

@xenohunter · 02.09.2014, 21:51

sweelemk, отвечу на первую часть вопроса: у вас регулярное выражение проверяет только первый символ. Чтобы проверялись все символы, нужно так:

JavaScript
1
var cont_phone = /^\d+$/;

@sweelemk · 02.09.2014, 22:40 **[ТС]**

xenohunter, т.е.

JavaScript
1
var cont_phone = /^\d+$/;

проверяет на наличие в input только цифр?

@xenohunter · 03.09.2014, 00:04

sweelemk, проверяет строку на предмет того, что она состоит только из цифр. Где вы берёте строку - не имеет значения.

@sweelemk · 03.09.2014, 09:52 **[ТС]**

xenohunter, оу, отлично! Спасибо большое! а по второму вопросу может есть какие мысли?

Добавлено через 20 минут
xenohunter, НЕ работает... не проверяет...

@kalabuni · 03.09.2014, 10:30

1. if (val.replace (/\d/g, '').length) alert ('ERROR');

2. <input type="submit" value="Отправить" onclick="for (fE = this.form.elements, j = 0; J = fE.length; j < J; j++) if fE [j].value == '') alert ('ERROR'); return false}"

@xenohunter · 03.09.2014, 13:12

sweelemk, у меня работает. Кидайте целиком код, который не работает, и ошибку, если выдаёт.

@sweelemk · 03.09.2014, 15:18 **[ТС]**

xenohunter,

HTML5
1
2
3
4
5
<div class="input-bloc">
                        <input type="text" size="25" name="cont_phone" id="cont_phone"/>
                        <span for="cont_phone">Контактный телефон:</span> 
                        <div class="error-box"></div>
                    </div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
switch(id)
            {
                case 'name':
                    var rv_name = /^[a-zA-Zа-яА-Я]+$/;
                    if(val.length>2 && val !='' && rv_name.test(val))
                    {
                        $(this).addClass('not_error').css('border', bcolorGreen);
                    }
                    else
                    {
                        $(this).removeClass('not_error').addClass('error').css('border',bcolorRed);
                    }
                    break;
                case 'cont_phone':
                    var cont_phone = /^[0-9]*$/;
                           if(val.length>5 && val != '' && rv_cont_phone.test(val))
                           {
                              $(this).addClass('not_error').css('border',bcolorGreen);
                           }
                           else
                           {
                              $(this).removeClass('not_error').addClass('error').css('border',bcolorRed);
                    }
                    break;
                case 'email':
                    var rv_email = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
                           if(val != '' && rv_email.test(val))
                           {
                              $(this).addClass('not_error').css('border',bcolorGreen);
                           }
                           else
                           {
                              $(this).removeClass('not_error').addClass('error').css('border',bcolorRed);
                    }
                    break;
                case 'message':
                          if(val != '' && val.length < 5000)
                          {
                             $(this).addClass('not_error').css('border',bcolorGreen);
                          }
                          else
                          {
                             $(this).removeClass('not_error').addClass('error').css('border',bcolorRed);
                          }
                      break;
            }

@Eva Rosalene · 03.09.2014, 15:30

Сразу поправлю.

JavaScript
26
var rv_email = /^([a-zA-Z0-9_\.\-])+@([a-zA-Z0-9_\.\-])+\.([a-zA-Z]){2,}/;

Это если сохранять схему, предложенную же этим кодом.

@xenohunter · 03.09.2014, 15:46

sweelemk, для начала, у вас же regexp неправильный:

JavaScript
1
2
var your_cont_phone = /^[0-9]*$/, // пропускает пустые строки
    true_cont_phone = /^[0-9]+$/; // не пропускает

Кроме того, regexp сохранён в переменной cont_phone, а вызвать его метод вы его пытаетесь из rv_cont_phone.
И, напоследок, хотелось бы спросить, зачем вы проверяете строку на непустоту после того, как проверили её длину? Все проверки в regexp:

JavaScript
1
var full_cont_phone = /^\d{6,}$/;

FraidZZ, ещё можно так, один из самых проверенных regexp'ов для e-mail:

JavaScript
1
var rv_email = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

@Eva Rosalene · 03.09.2014, 16:13

Не по теме:

xenohunter,

JavaScript
1
/.*@.*/

:D

@sweelemk · 03.09.2014, 16:30 **[ТС]**

xenohunter, FraidZZ, не понимаю, в чем дело, но все равно не проверяет на наличие цифр...

@xenohunter · 03.09.2014, 18:07

Сообщение от xenohunter

Кроме того, regexp сохранён в переменной cont_phone, а вызвать его метод вы его пытаетесь из rv_cont_phone.

sweelemk, вы обратили внимание на эту строку?

@sweelemk · 03.09.2014, 18:59 **[ТС]**

xenohunter, да, я учел все замечания

@Eva Rosalene · 03.09.2014, 19:10

sweelemk, приведите полученный код.

@sweelemk · 05.09.2014, 14:37 **[ТС]**

FraidZZ,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
switch(id)
            {
                case 'name':
                    var rv_name = /^[a-zA-Zа-яА-Я]+$/;
                    if(val.length>2 && val !='' && rv_name.test(val))
                    {
                        $(this).addClass('not_error').css('border', bcolorGreen);
                    }
                    else
                    {
                        $(this).removeClass('not_error').addClass('error').css('border',bcolorRed);
                    }
                    break;
                case 'cont_phone':
                    var cont_phone = /^[0-9]+$/;
                           if(val != '' && cont_phone.test(val))
                           {
                              $(this).addClass('not_error').css('border',bcolorGreen);
                           }
                           else
                           {
                              $(this).removeClass('not_error').addClass('error').css('border',bcolorRed);
                    }
                    break;
                case 'email':
                    var rv_email = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                           if(val != '' && rv_email.test(val))
                           {
                              $(this).addClass('not_error').css('border',bcolorGreen);
                           }
                           else
                           {
                              $(this).removeClass('not_error').addClass('error').css('border',bcolorRed);
                    }
                    break;
                case 'message':
                          if(val != '' && val.length < 5000)
                          {
                             $(this).addClass('not_error').css('border',bcolorGreen);
                          }
                          else
                          {
                             $(this).removeClass('not_error').addClass('error').css('border',bcolorRed);
                          }
                      break;
            }

@Eva Rosalene · 05.09.2014, 14:52

sweelemk, данный код выглядит пока что верным. Приведите весь остальной.

@sweelemk · 05.09.2014, 15:58 **[ТС]**

FraidZZ,

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="overlay js-overlay"></div>
<div class="popup-form popup_comm_form js-popup js-popup-comment">
    <div class="popup__close js-popup-close">Закрыть</div>
    <div class="popup__inner">
        <div class="comm">
            <div class="comm__content">
                <h2 class="h2-form">Написать нам</h2>
                <form id="feedback-form">
                    <div class="input-bloc">
                        <input type="text" size="25" name="name" id="name" />
                        <span for="name">Имя:</span>
                        <div class="error-box"></div>
                        <div class="not-error-box"></div>
                    </div>
                    <div class="input-bloc">
                        <input type="text" size="25" name="cont_phone" id="cont_phone"/>
                        <span for="cont_phone">Контактный телефон:</span> 
                        <div class="error-box"></div>
                    </div>
                    <div class="input-bloc">
                        <input type="text" size="25" name="email" id="email"/>
                        <span for="email">E-mail:</span> 
                        <div class="error-box"></div>
                    </div>
                    <div class="input-bloc">
                        <textarea name="message" cols="50" rows="10" id="message" ></textarea>
                        <span for="message">Текст сообщения:</span>
                        <div class="error-box"></div>
                    </div>
                    <div><input type="submit" id="send" value="Отправить письмо" /></div>
                </form>
            </div>
        </div>
    </div>
</div>

Вся функция

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
$('input#name, input#email, textarea#message').unbind().blur( function(){
            var id = $(this).attr('id');
            var val = $(this).val();
            var bcolorGreen = '1px solid green';
            var bcolorRed = '1px solid red';
 
 
            switch(id)
            {
                case 'name':
                    var rv_name = /^[a-zA-Zа-яА-Я]+$/;
                    if(val.length>2 && val !='' && rv_name.test(val))
                    {
                        $(this).addClass('not_error').css('border', bcolorGreen);
                    }
                    else
                    {
                        $(this).removeClass('not_error').addClass('error').css('border',bcolorRed);
                    }
                    break;
                case 'cont_phone':
                    var cont_phone = /^[0-9]+$/;
                           if(val != '' && cont_phone.test(val))
                           {
                              $(this).addClass('not_error').css('border',bcolorGreen);
                           }
                           else
                           {
                              $(this).removeClass('not_error').addClass('error').css('border',bcolorRed);
                    }
                    break;
                case 'email':
                    var rv_email = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                           if(val != '' && rv_email.test(val))
                           {
                              $(this).addClass('not_error').css('border',bcolorGreen);
                           }
                           else
                           {
                              $(this).removeClass('not_error').addClass('error').css('border',bcolorRed);
                    }
                    break;
                case 'message':
                          if(val != '' && val.length < 5000)
                          {
                             $(this).addClass('not_error').css('border',bcolorGreen);
                          }
                          else
                          {
                             $(this).removeClass('not_error').addClass('error').css('border',bcolorRed);
                          }
                      break;
            }   
 
            $('form#feedback-form').submit(function(e){
                e.preventDefault();
 
                if($('.not_error').length==4)
                {
                    alert('ok');
                }
                else{
                    alert('bad');
                }
            });
 
        });

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
.popup-form { 
    position: fixed; 
    top: 170px; 
    left: 50%; 
    width: 960px; 
    visibility: hidden; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 
    opacity: 0; 
    margin-left: -480px; 
    z-index: 999; 
    -webkit-transform-origin: 50% 50%; 
    -moz-transform-origin: 50% 50%; 
    -ms-transform-origin: 50% 50%; 
    -o-transform-origin: 50% 50%; 
    transform-origin: 50% 50%; 
    -moz-transform: scale(0.8); 
    -ms-transform: scale(0.8); 
    -webkit-transform: scale(0.8); 
    transform: scale(0.8); 
    -moz-transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    -o-transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    -webkit-transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    }
.popup-form.is-open { 
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); 
    opacity: 1; 
    visibility: visible; 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    -webkit-transform: scale(1); 
    transform: scale(1); 
}
.popup-form.popup_comm_form { 
    position: absolute; 
    width: 580px; 
    height: 710px;
    margin-left: -290px; 
    padding: 105px 95px 100px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    background: white; 
    text-align: center;
}
.h2-form{
    font-family: "ReformaGroteskDemiCRegular", sans-serif;
    font-size: 28px;
    text-transform: uppercase;
    margin-bottom: 35px;
    line-height: 22px;
}
.input-bloc{
    position: relative;
    margin-bottom: 13px;
}
.input-bloc span{
    display: block;
    position: absolute;
    top: 16px;
    left: 10px;
    font-family: "PT Sans", sans-serif;
    font-size: 14px;
    color: #a2a2a2; 
    letter-spacing: 1px;
}
 
#feedback-form textarea{
    resize: none;
    overflow-y: auto;
    height: 127px;
}
#feedback-form input[type="text"], #feedback-form textarea{
    font-family: "PT Sans", sans-serif;
    outline: none;
    border: none;
    background-color: #eee;
    color: #262626;
    font-size: 14px;
}
#feedback-form textarea{
    padding: 40px 10px 18px;
    width: 370px;
}
#feedback-form #name{
    padding: 18px 10px 18px 45px;
    width: 335px;
}
#feedback-form #cont_phone{
    padding: 18px 10px 18px 165px;
    width: 215px;
}
#feedback-form #email{
    padding: 18px 10px 18px 65px;
    width: 315px;
}
#feedback-form input[type="submit"]{
    position: relative;
    letter-spacing: 1px;
    font-family: "PFAgoraSansProBlack", sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    width: 390px;
    height: 51px;
    background: #ff7a08;
    border-bottom: 4px solid #c9641a;
    color: #FFF;
}
#feedback-form input[type="submit"]:hover{
    background-color: #ed6e00;
    bottom: -4px;
}
.error-box{
    color: red;
    font-size: 12px;
    position: absolute;
    width: 20px;
    height: 20px;
    background: red;
    top: 50%;
    margin: -10px -30px 0 0;
    right: 0;
    display: none;
}
.not-error-box{
    color: green;
    font-size: 12px;
    position: absolute;
    width: 20px;
    height: 20px;
    background: aqua;
    top: 50%;
    margin: -10px -30px 0 0;
    right: 0;
    display: none;
}

Новые блоги и статьи Все статьи Все блоги /
Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .

@xenohunter Дзен-программист 122 / 87 / 16 Регистрация: 10.04.2013 Сообщений: 253
	03.09.2014, 00:04
	sweelemk, проверяет строку на предмет того, что она состоит только из цифр. Где вы берёте строку - не имеет значения. 0

@sweelemk 0 / 0 / 1 Регистрация: 16.09.2013 Сообщений: 127
	03.09.2014, 09:52 [ТС]
	xenohunter, оу, отлично! Спасибо большое! а по второму вопросу может есть какие мысли? Добавлено через 20 минут xenohunter, НЕ работает... не проверяет... 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	03.09.2014, 10:30
	1. if (val.replace (/\d/g, '').length) alert ('ERROR'); 2. <input type="submit" value="Отправить" onclick="for (fE = this.form.elements, j = 0; J = fE.length; j < J; j++) if fE [j].value == '') alert ('ERROR'); return false}" 0

@xenohunter Дзен-программист 122 / 87 / 16 Регистрация: 10.04.2013 Сообщений: 253
	03.09.2014, 13:12
	sweelemk, у меня работает. Кидайте целиком код, который не работает, и ошибку, если выдаёт. 0

@sweelemk 0 / 0 / 1 Регистрация: 16.09.2013 Сообщений: 127
	03.09.2014, 16:30 [ТС]
	xenohunter, FraidZZ, не понимаю, в чем дело, но все равно не проверяет на наличие цифр... 0

@sweelemk 0 / 0 / 1 Регистрация: 16.09.2013 Сообщений: 127
	03.09.2014, 18:59 [ТС]
	xenohunter, да, я учел все замечания 0

@Eva Rosalene Модератор 5241 / 2115 / 416 Регистрация: 06.01.2013 Сообщений: 4,846
	03.09.2014, 19:10
	sweelemk, приведите полученный код. 0

@Eva Rosalene Модератор 5241 / 2115 / 416 Регистрация: 06.01.2013 Сообщений: 4,846
	05.09.2014, 14:52
	sweelemk, данный код выглядит пока что верным. Приведите весь остальной. 0