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

@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;
}

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@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