Ответы пользователя по тегу HTML
  • Почему не работает проверка на количество символов в инпуте?

    kn1ght_t
    @kn1ght_t Автор вопроса
    вот здесь предложенное выше решение не помогло
    <form class="rf"> 
    	<input type="text" placeholder="Сумма кредита, рублей" class="form-credit">
    	<input type="name" placeholder="Ваше имя" class="form-name">
    	<input type="tel" pattern="[0-9]{5,}" placeholder="Телефон" class="form-tel rfield">
    	<input type="submit"  value="получить кредит" class="modal_submit disabled">
    	<input type="hidden" value="заказ обратного звонка" class="form-hidden">
    </form>


    $('.rf').each(function(){
        // Объявляем переменные (форма и кнопка отправки)
    	var form = $(this),
            btn = form.find('.modal_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({'outline':'1px solid #da0303'});
          // Через полсекунды удаляем подсветку
          setTimeout(function(){
            form.find('.empty_field').removeAttr('style');
          },1000);
        }
    
        // Проверка в режиме реального времени
        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(){ 
        var name_f = $(this).parent('form').find('.form-name').val(); 
    		var tel_f =  $(this).parent('form').find('.form-tel').val();
    		var email_f = $(this).parent('form').find('.form-email').val();
    		var form_name_f = $(this).parent('form').find('input[type="hidden"]').val();
    		var form_credit_f = $(this).parent('form').find('.form-credit').val();
    		var form_salary_f = $(this).parent('form').find('.form-salary').val();
    		var form_pay_f = $(this).parent('form').find('.form-pay').val();
    
          if($(this).hasClass('disabled') && tel_f!='+7 (___) ___ __ __' ){ 
            // подсвечиваем незаполненные поля и форму не отправляем, если есть незаполненные поля
    		lightEmpty();
            return false
          } else {
    		// Все хорошо, все заполнено, отправляем форму
    		$.ajax({
    			type: "POST",
    			url: "mail.php",
    			data:{
    				"name_f":name_f,
    				"tel_f":tel_f,
    				"email_f":email_f,
    				"form_name_f":form_name_f,
    				"form_credit_f":form_credit_f,
    				"form_salary_f":form_salary_f,
    				"form_pay_f":form_pay_f
    			},
    			success: function() {
    				clear_form();
    				$('.modal').hide();
    				$('.modal2').show();
    				$('[type="name"],[type="tel"]').css({'box-shadow': ''})
    			}
    		})
          }
        });
      });
    Ответ написан