Почему не работает проверка на количество символов в инпуте?

Question

[kn1ght_t]

есть форма:

<form> 
	<input type="name" placeholder="Введите имя" class="form-name">
	<input type="tel" placeholder="Введите телефон" class="form-tel">
	<input type="email" placeholder="Введите email" class="form-email">
	<input type="submit"  value="Заказать звонок" class="modal_submit">
	<input type="hidden" value="Заказ обратного звонка" class="form-hidden">
</form>

есть такая отправка с проверкой на количество символов (не меньше 6):

$('.modal_submit').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();
	if(tel_f.length >= 6) {
		$.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
			},
			success: function() {
				clear_form();
				$('.modal').hide();
				$('.modal2').show();
				$('[type="name"],[type="tel"]').css({'box-shadow': ''})
			}
		})
	}
	else {
		$(this).parent('form').find('.form-tel').css({'box-shadow': '0 0 15px #da0303'});
	}
	return false;
})

она прекрасно работает, но если подключить плагин ввода телефона по маске, проверка работает только при отправке формы по нажатию мышки на инпут сабмит, и перестает работать при нажатии на enter

Comments

[kn1ght_t]

плагин так подключается : $('.form-tel').mask('+ 7 (999) 999 99 99'); ссылка на плагин plugins.jquery.com/maskedinput

Answer 1

[Александр Таратин]

$('.modal_submit').click(function(){

Подписывайтесь на событие отправки формы, а не на клик

$('form').submit(function(){....

Comments

[kn1ght_t]

не помогло, как я понял, плагин ввода по маске при нахождении (фокусе) в инпуте инициализирует там символы (например: +7 (___) ___ ____ _) ), которые считаются за значение, поэтому проверка не работает... как исправить это я не знаю

[Александр Таратин]

@kn1ght_t if(tel_f.length >= 6 && tel_f!='+7 (___) ___ ____ _') {

[kn1ght_t]

в одном месте помогло, в другом не совсем, возможно в скайпе тебя помучить?))

[Александр Таратин]

@kn1ght_t мучайте тут или оформите отдельный вопрос.

[kn1ght_t]

в общем в этом куске кода этот прием сработал, но на другом сайте нет, форма все равно отправляется, сейчас код напишу в ответах

Answer 2

[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': ''})
			}
		})
      }
    });
  });

Comments

[kn1ght_t]

это результат: https://yadi.sk/i/VXHFp0GOc2SRB , то есть появляется уведомление об использовании требуемого формата

[Александр Таратин]

if($(this).hasClass('disabled') || tel_f=='+7 (___) ___ __ __' ){

[kn1ght_t]

теперь заработало, но при нажатии enter не срабатывает подсветка, при нажатии на инпут самбит подсветка все так же работает + надпись о требуемом формате не могу побороть

[Александр Таратин]

@kn1ght_t чтобы работал сабмит по энтеру нужно подписываться на событие сабмита, а не клика, я это уже говорил.