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

Nekto_33 · 28.10.2011, 20:18

Здравствуйте, коллеги! Прошу помощи.
Есть форма, поля которой проверяются на корректность с помощью jQuery. Реализована возможность проверки двух полей инпут-текста – поля для ввода имени и поля для ввода email. Проверяются они с помощью регулярных выражений. Вначале кнопка submit, id которой #my_button скрыта. Когда будут заполнены 2 этих текстовых поля и проверены на правильность, кнопка открывается. И всё бы хорошо, но я не могу реализовать такую же проверку остальных элементов формы – это радиокнопки, чекбоксы и селект.
Я хочу сделать так, чтобы все элементы формы проверялись и кнопка submit была закрыта до тех пор , пока все элементы формы не будут заполнены. Помогите дописать код и понять ,как реализовать такую возможность. Заранее благодарю за помощь в освоении java script.
Я залил архив с html и js файлом, чтобы можно было удобно просмотреть форму. Заранее благодарю за помощь! http://narod.ru/disk/29782410001/forma.rar.html

Код HTML:

<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>

Код:

$(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

Groz22 · 04.03.2012, 23:08

А я вот этой http://zonawebera.ru/index.php?newsid=38 формой раньше пользовался! Мне всегда нравилась ее идея)))

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Заполнение формы с проверкой	маленький монстрик	JavaScript, Ajax	0	13.06.2011 20:07
Проблема с проверкой строки :(	Ksy	C# (си шарп)	4	15.05.2011 22:58
Передача массива данных с использованием JQuery	Виталий Желтяков	JavaScript, Ajax	4	23.04.2010 11:24
C++/не могу разобраться с проверкой	kolashik	Помощь студентам	5	12.10.2009 18:00
Помогите с проверкой в паскале	neomaximus	Помощь студентам	2	10.07.2008 09:41

04.03.2012, 23:08	#2
Groz22 Новичок Джуниор Регистрация: 04.03.2012 Сообщений: 1	А я вот этой http://zonawebera.ru/index.php?newsid=38 формой раньше пользовался! Мне всегда нравилась ее идея)))