Подскажите, как скрыть кнопку отправить после проверки через java script всех значений формы?
Т.е необходимо, чтобы кнопка скрвалась только если заполнены все обязательные поля.
https://jsfiddle.net/Max0n/j58j7qrt/4/<!doctype html>
<!--[if IE 7 ]><html class="ie7"> <![endif]-->
<!--[if IE 8 ]><html class="ie8"> <![endif]-->
<!--[if IE 9 ]><html class="ie9"> <![endif]-->
<!--[if (gte IE 10)|!(IE)]><!--><html> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>А роверка полей формы перед отправкой с помощью jQuery</title>
<link type="text/css" rel="stylesheet" href="style.css" media="all" />
</head>
<body>
<div id="main">
<form action="#" method="post" class="form_check form_style">
<p class="rline">
<label for="user_name">Имя пользователя:</label>
<input type="text" class="rfield" id="user_name" />
</p>
<p class="rline">
<label for="user_family">Фамилия пользователя</label>
<input type="text" class="rfield" id="user_family" />
</p>
<p class="rline">
<label for="user_mail">Email пользователя</label>
<input type="text" class="rfield mailfield" id="user_mail" />
</p>
<p class="rline">
<label for="user_phone">Телефон пользователя:</label>
<input type="text" class="rfield phonefield" id="user_phone" />
</p>
<p class="rline">
<label for="user_work">Профессия пользователя:</label>
<input type="text" class="rfield" id="user_work" />
</p>
<p class="rline rcheck">
<input type="checkbox" class="rfield" id="check_1" />
<label for="check_1">Я прочитал условия лицензионного соглашения</label>
</p>
<p class="rline rcheck">
<input type="checkbox" class="rfield" id="check_2" />
<label for="check_2">Я согласен на все!</label>
</p>
<button type="submit" class="btnsubmit">Отправить данные</button>
</form>
</div>
</div>
</body>
</html>
(function( $ ){
//// ---> Check issue element
jQuery.fn.exists = function() {
return jQuery(this).length;
}
$(function() {
if( $('.form_check').exists()){
$('.form_check').each(function(){
var form = $(this),
btn = form.find('.btnsubmit');
form.find('.rfield').addClass('empty_field').parents('.rline').append('<span class="rfield_error">Заполните поле</span>');
btn.addClass('disabled');
// Функция проверки полей формы
function checkInput(){
form.find('.rfield').each(function(){
if($(this).hasClass('mailfield')) {
var mailfield = $(this);
var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
if(pattern.test(mailfield.val())){
mailfield.removeClass('empty_field');
} else {
mailfield.addClass('empty_field');
}
} else if($(this).is(':checkbox')) {
var checkBox = $(this);
if(checkBox.is(':checked')){
checkBox.removeClass('empty_field')
} else {
checkBox.addClass('empty_field')
}
} else if($(this).val() != '') {
$(this).removeClass('empty_field');
} else {
$(this).addClass('empty_field');
}
});
}
// Функция подсветки незаполненных полей
function lightEmpty(){
form.find('.empty_field').addClass('rf_error').addClass('rf_trouble');
form.find('.rf_trouble').parents('.rline').find('.rfield_error').css({'visibility':'visible'});
setTimeout(function(){
form.find('.rf_trouble').removeClass('rf_error');
form.find('.rf_trouble').parents('.rline').find('.rfield_error').css({'visibility':'hidden'});
form.find('.rf_trouble').removeClass('rf_trouble');
},1500);
}
// Полсекундная проверка
setInterval(function(){
checkInput();
var sizeEmpty = form.find('.empty_field').length;
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 );
