Знаю что возможно это глупо или может многого хочу,но я только учусь и пытаюсь научиться jQuery.
Есть форма на сайте. условия такие:
1. что бы проверялось каждое поле на заполненность и если пустое то сбоку появлялся скрытый div display: none;
2. кнопка отправить была одного вида до заполнения, как все заполнилось менялась на другую
(т.е. стоит сначала одна кнопка,та которая должна появляться есть, но она скрытая соответственна неактивная должна пропадать)
3.так же еще условие, что присутствуют radio которые должны выбираться и только один правильный что бы форма считалась правильно заполненной и не выдавались не какие сообщения.
<div class="form_box">
<form action="#" method="post" class="rf form_check">
<div class="point_input">
<div class="name_input">Фамилия</div>
<input type="text" class="rfield" id="user_family">
<div class="info_input">
<div class="arrow">Поле обязательно для заполенения</div>
</div>
<div class="clear"></div>
</div>
<div class="point_input">
<div class="name_input">Имя</div>
<input type="text" class="rfield" id="user_name" >
<div class="info_input">
<div class="arrow">Поле обязательно для заполенения</div>
</div>
<div class="clear"></div>
</div>
<div class="point_input">
<div class="name_input">Отчество</div>
<input type="text" class="rfield" id="user_second " >
<div class="info_input">
<div class="arrow">Поле обязательно для заполенения</div>
</div>
<div class="clear"></div>
</div>
<div class="point_input">
<div class="name_input">Гражданство РФ</div>
<input type="radio"
name="radio" id="radio_1">
<label for="radio_1">Нет</label>
<input type="radio" name="radio" id="radio_2">
<label for="radio_2">Да</label>
<div class="info_input1">
<div class="arrow">Кредит может быть выдан только гражданам РФ</div>
</div>
<div class="clear"></div>
<input id="submit_active" name="submit" type="submit" value="Отправить заявку">
<input id="submit_none" class="btn_submit disabled" name="submit" type="submit" value="Отправить заявку">
<div class="clear"></div>
</div>
</form>
</div>
label {
display: inline-block;
width: 70px;
margin-top:15px;
color: rgb(84, 84, 84);
font-size: 16px;
line-height: 15px;
font-family: opensans-regular;
font-weight: 400;
}
#submit_active{
display: none;
width: 224px;
height: 50px;
background-color: rgb(253, 135, 0);
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.01) 0%, rgba(255, 255, 255, 0.01) 100%);
border-radius: 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.56);
color: white;
font-family: opensans-regular;
font-size: 16px;
line-height: 21px;
text-transform: uppercase;
cursor:pointer;
margin: 57px 334px 46px;
}
#submit_none{
width: 224px;
height: 50px;
border-radius: 3px;
box-shadow:-1px 1px 3px 0px rgba(167, 167, 165, 0.56) inset;
font-size: 16px;
line-height: 21px;
text-transform: uppercase;
cursor:pointer;
margin: 57px 334px 46px;
color:#a7a7af;
}
.radio input{
width: 20px;
height: 20px;
background-color: rgb(223, 226, 238);
border: 1px solid rgb(163, 172, 207);
}
.intro{
color: black;
font-size: 16px;
line-height: 13px;
float:
}
.point_input{
margin-top: 30px;
position: relative;
}
.name_input{
height: 40px;
float: left;
width: 215px;
line-height: 40px;
font-family: opensans-regular;
color: rgb(84, 84, 84);
}
.point_input input[type=text]{
border: 1px solid #d9dbe2;
height: 40px;
width: 360px;
float: left;
font-size: 16px;
text-indent: 15px;
}
.point_input input[type=text]:focus{
border: 1px solid rgb(228, 159, 154);
}
.info_input {
float: right;
width: 275px;
background: url('img/info.png') no-repeat;
padding: 10px;
color: #d91404;
position: relative;
line-height: 25px;
display: none;
}
.info_input1 {
display: none;
float: right;
width: 275px;
height: 48px;
background: url('img/info2.png') no-repeat;
padding: 10px;
color: #d91404;
position: relative;
line-height: 21px;
}
.arrow{
font-family: opensans-regular;
font-size: 13px;
margin-left: 10px;
}
Код не мой, находил в инете, пытался разбираться и подгонять, но что только все ломается((
(function( $ ){
$(function() {
$('.rf').each(function(){
// Объявляем переменные (форма и кнопка отправки)
var form = $(this),
btn = form.find('.btn_submit');
// Добавляем каждому проверяемому полю, указание что поле пустое
form.find('.rfield').addClass('empty_field');
// Функция проверки полей формы
function checkInput(){
form.find('.rfield').each(function(){
if($(this).val() != ''){
// Если поле не пустое удаляем класс-указание
$(this).removeClass('empty_field');
} else {
// Если поле пустое добавляем класс-указание
$(this).addClass('empty_field');
}
});
}
// Функция подсветки незаполненных полей
function lightEmpty(){
form.find('.empty_field').css({'border-color':'#d8512d'});
// Через полсекунды удаляем подсветку
setTimeout(function(){
form.find('.empty_field').removeAttr('style');
},500);
}
// Проверка в режиме реального времени
setInterval(function(){
// Запускаем функцию проверки полей на заполненность
checkInput();
// Считаем к-во незаполненных полей
var sizeEmpty = form.find('.empty_field').size();
// Вешаем условие-тригер на кнопку отправки формы
if(sizeEmpty > 0){
if(btn.hasClass('disabled')){
return false
} else {
btn.addClass('disabled')
}
} else {
btn.removeClass('disabled')
}
},500);
// Событие клика по кнопке отправить
btn.click(function(){
if($(this).hasClass('disabled')){
// подсвечиваем незаполненные поля и форму не отправляем, если есть незаполненные поля
lightEmpty();
return false
} else {
// Все хорошо, все заполнено, отправляем форму
form.submit();
}
});
});
});
})( jQuery );
