Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.89/9: Рейтинг темы: голосов - 9, средняя оценка - 4.89
0 / 0 / 0
Регистрация: 28.10.2011
Сообщений: 8

Форма с проверкой и использованием jQuery

28.10.2011, 20:32. Показов 1808. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте, коллеги! Прошу помощи.
Есть форма, поля которой проверяются на корректность с помощью jQuery. Реализована возможность проверки двух полей инпут-текста – поля для ввода имени и поля для ввода email. Проверяются они с помощью регулярных выражений. Вначале кнопка submit, id которой #my_button скрыта. Когда будут заполнены 2 этих текстовых поля и проверены на правильность, кнопка открывается. И всё бы хорошо, но я не могу реализовать такую же проверку остальных элементов формы – это радиокнопки, чекбоксы и селект.
Я хочу сделать так, чтобы все элементы формы проверялись и кнопка submit была закрыта до тех пор , пока все элементы формы не будут заполнены. Помогите дописать код и понять ,как реализовать такую возможность. Заранее благодарю за помощь в освоении java script.
Я залил архив с html и js файлом, чтобы можно было удобно просмотреть форму. Заранее благодарю за помощь!
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
<body>
<form id="contact_form" name="contact_form" method="post" action="formdata.php">
 
<p>Ваше имя: <input id="new_name" type="text" name="contact_name" /> <font id="font_error_name">Вы ввели некорректное имя</font></p>
<p>Введите Ваш email: <input id="email" type="text" name="email" /> <font id="font_error_email">Вы ввели некорректный email</font></p>
<div id="radio_gruppa_1">
<p>Отметте одну из радиокнопок <input id="radio_1" type="radio" name="gender" value="1" />Первая радиокнопка
&nbsp; <input id="radio_2" type="radio" name="gender" value="2" /> Вторая радиокнопка</p>
</div>
<p>Отметте все радиокнопки: 
<input id="radio_3" type="radio" name="q" value="q" /> Q 
&nbsp; <input id="radio_4" type="radio" name="w" value="w" /> W
&nbsp; <input id="radio_5" type="radio" name="e" value="e" /> E
&nbsp; <input id="radio_6" type="radio" name="r" value="r" /> R
&nbsp; <input id="radio_7" type="radio" name="t" value="t" /> T
</p>
 
<p>Ваш возраст:
<select name="age" id="age">
<option id="sel_1" value="6">Выберите одну из опций:</option >
<option id="sel_2" value="1">0-18 лет</option>
<option id="sel_3" value="2">18-30 лет</option >
<option id="sel_4" value="3">30-45 лет</option >
<option id="sel_5" value="4">45-60 лет</option >
<option id="sel_6" value="5">60+ лет</option >
</select></p>
 
<p>вы согласны с Соглашением?
<input id="sogl" type="checkbox" name="terms" value="1" /> Да
 
</p><p><input id="my_button" type="submit" name="send" value="Отправить данные" /></p>
 
</form>
</body>
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
$(document).ready(function() {
$('#my_button').attr('disabled','disabled');
 
/**INPUT NAME/
/*Ставим курсор в инпут для ввода имени*/
var regV = /[А-Яа-яA-Za-z]{3}/;
var new_name = $('#new_name');
new_name.focus(function() {
$(this).css('border','2px solid #A0AAE9');
});
/*Уводим курсор*/
new_name.blur(function() {
var user_new_name = $(this).val();/*Сохраняем значение в переменную, которое ввёл пользователь*/
if ((user_new_name == '') || (user_new_name.search(regV) == -1)){
    $(this).css('border','2px solid #E90069');
    $('#font_error_name').text('Вы ввели некорректное имя').animate({'display':'block'},200).fadeIn(200);
    }
    else{ 
    $(this).css('border','2px solid #77E999');
    $('#font_error_name').text('Поле заполнено верно!').animate({'display':'block'},200).fadeIn(200);
 
   }
});
/**КОНЕЦ INPUT NAME*/
/*Ставим курсор в инпут для ввода email*/
var regV2 = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/;
var new_email = $('#email');
new_email.focus(function() {
$(this).css('border','2px solid #A0AAE9');
});
/*Уводим курсор*/
new_email.blur(function() {
var user_new_email = $(this).val();/*Сохраняем значение в переменную, которое ввёл пользователь*/
if ((user_new_email == '') || (user_new_email.search(regV2) == -1)){
    $(this).css('border','2px solid #E90069');
    $('#font_error_email').text('Вы ввели некорректный email').animate({'display':'block'},200).fadeIn(200);
    }
    else{ 
    $(this).css('border','2px solid #77E999');
    $('#font_error_email').text('Поле заполнено верно!').animate({'display':'block'},200).fadeIn(200);
   }
});
 
/* BUTTON */
$('#my_button').click(function (eventObject){
    var answer = confirm('Вы одтверждаете отправку данных?');
    if (!answer) {
        eventObject.preventDefault(); /* отменяем отправку формы*/
    }
});
 
}); // Конец ready
Вложения
Тип файла: rar forma.rar (80.0 Кб, 38 просмотров)
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
28.10.2011, 20:32
Ответы с готовыми решениями:

Форма обратной связи на PHP и jQuery с использованием Ajax
Здравствуйте, С наступившим Новым Годом! Подскажите, пожалуйста, устанавливал форму обратной связи: &quot;Форма обратной связи на PHP и...

Форма с проверкой!
Здравствуйте! Помогите пожалуйста реализовать задачу! Заранее спасибо) Реалізувати за допомогою JavaScript маску для вводу...

Форма с проверкой текста
Помогите, вообще ничего не смыслю в PHP. Нужно сделать так: Существует одна форма для ввода текста, тут вводится определенный текст...

2
weboman
 Аватар для Schtrich
210 / 195 / 63
Регистрация: 13.08.2010
Сообщений: 1,531
Записей в блоге: 6
29.10.2011, 00:00
forma.rar

с ксс и текстом я церемоница не буду.
1
0 / 0 / 0
Регистрация: 28.10.2011
Сообщений: 8
30.10.2011, 17:50  [ТС]
Спасибо
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
30.10.2011, 17:50
Помогаю со студенческими работами здесь

Форма регистрации с проверкой
Приветствую! Недавно в PHP , запутался в задаче, прошу помощи. &lt;html&gt;&lt;head&gt;&lt;title&gt;Форма регистрации с...

Форма ввода с проверкой на повторяющиеся данные
Добрый день! Помогите пожалуйста! В форме Enter_Товар выполняется ввод данных. Каким образом мне не допустить ввод одинаковый наименований...

"Сложная форма регистрации!" с проверкой почты
Привет всем такая проблема: Нашёл в инете форму регистраци Проблема вот в чём: Он мне пишет: Warning: mysqli::mysqli():...

Php форма + Jquery
Помогите разобратся в следующем вопросе. Делаю админку в которой добавляются вопросы для тестов в базу данных. Делать нужно так чтобы...

Форма на HTML/JS без jquery
Есть HTML форма(ы), для очистки полей и отправки данных формы БЕЗ перезагрузки страницы исполбзуется jquery. Как сделать эти две...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru