Не работает validate на форме, загруженной ajax'ом

[Daniel93]

Извините, что еще раз обращаюсь, но возник еще один вопрос.
Форма загружает с помощью ajax, пытаюсь проверить форму "налету", но ничего не происходит, не могу прописать функцию .on()

<script>
$(document).ready(function(){
$(function(){
  $(document).on('focus', '#form_pc', function(){
		$('#form_pc').validate({
			rules: {
			pc_name:{
				required: true, 
				rangelength: [2,16],
			}, // Конец pc_name
			}, // Конец rules
			messages: {
			pc_name: {
				required: " Введите, пожалуйста, свое имя", 
				rangelength: "Ваше имя должно содержать от 8 до 16 символов",
			},
			} // Конец messages
		}); // Конец validate
  }); // Конец .on()
}); // Конец function
});
</script>

<form action="handler/pc.php" method="POST" id='form_pc' name="form_pc">
	<label class="">Ваше имя:</label><br />
	<input name="pc_name" type="text" id="pc_name" size="36"><br />
	<label class="">Ваша фамилия:</label><br />
	<input name="pc_sname" type="text" id="pc_sname" size="36"><br />
	<label class="">Номер телефона:</label><br />
	<input name="pc_telephone" type="text" id="pc_telephone" size="36"><br />
	<label class="">Ваш адрес:</label><br />
	<input name="pc_add" type="text" id="pc_add" size="36"><br />
	<label class="">Опишите Вашу проблему:</label><br />
	<textarea name="pc_sub" rows="10" cols="50"></textarea><br />
	<input type="submit" name="pc_send" class="btn btn-large btn-primary" value="Отправить заявку">
</form>

[Daniel93]

<script>
$(document).ready(function(){
$(function(){
  $('input[type=submit]').click(function(){
		var form = $(this).closest('form');
		
		form.validate({
			rules: {
			pc_name:{
				required: true, 
				rangelength: [2,16],
			}, // Конец pc_name
			}, // Конец rules
			messages: {
			username: {
				required: " Введите, пожалуйста, свое имя", 
				rangelength: "Ваше имя должно содержать от 8 до 16 символов",
			},
			} // Конец messages
		});
		
		
  }); // Конец input[type=submit]
}); // Конец function
});
</script>

Так тоже не срабатывает, в консоли нет никаких ошибок

[ksa]

$('input[type=submit]').click()

Нужно не клик кнопки ловить, а отправку формы (onsubmit) отслеживать...

[Daniel93]

В таком случает форма же не будет проверяться "налету", так я понимаю?

[ksa]

$(document).on('focus', '#form_pc', function(){/*...*/});

Есть ли такое событие у формы?

<form onfocus='alert("Ok")'>
   <input type='text' />
   <button>Send</button>
</form>

Вроде нету...

[ksa]

В таком случает форма же не будет проверяться "налету", так я понимаю?

Я привел пример классического перехвата перед отправкой формы.
Но для меня сокрыт тайный смыл "проверки налету"...

[ksa]

В таком случает форма же не будет проверяться "налету", так я понимаю?

Как в учебниках учат проверять данные перед отправкой формы...

<form onsubmit='return ok();'>
   <input type='text' />
   <button>Send</button>
</form>
<script>
function ok(){
   var ok=true;
   // всякие проверки, с возможным изменением значения переменной ok
   return ok;
};
</script>

[Daniel93]

Так я проверку сделал

<script>
$(document).ready(function(){
$(function(){
  $(document).on('submit', '#form_pc', function(){
 	if ($('#pc_name').val() != '') {
		$query = true;
	} else {
		$('#pc_name').addClass('pc_name').after('<span class="danger">Введите, пожалуйста, свое имя</span>');
		$('#pc_name').focus(function() {
			//alert('Установили курсор');
			$('#pc_name').removeClass('pc_name');
			$('.danger').remove();
		})
		return false;
	}
 	if ($('#pc_telephone').val() != '') {
		$query2 = true;
	} else {
		$('#pc_telephone').addClass('pc_name').after('<span class="danger">Введите, пожалуйста, свой номер телефона</span>');
		$('#pc_telephone').focus(function() {
			//alert('Установили курсор');
			$('#pc_telephone').removeClass('pc_name');
			$('.danger').remove();
		})
		return false;
	}
	if ($('#pc_add').val() != '') {
		$query3 = true;
	} else {
		$('#pc_add').addClass('pc_name').after('<span class="danger">Введите, пожалуйста, свой адрес</span>');
		$('#pc_add').focus(function() {
			//alert('Установили курсор');
			$('#pc_add').removeClass('pc_name');
			$('.danger').remove();
		})
		return false;
	}
	alert('Ворма отправлена, скоро с вами свяжутся');
  }); // Конец on();
});
});
</script>

Но мне нужно, чтобы заработал такой код, но никак не получается( На обычных формах все работает, а на форме, загруженной ajax'ом, ничего не происходит

Пробовал вот так сделать:

<script>
$(document).ready(function(){
$(function(){
	$(document).on('submit', '#form_pc', function() {
		$('#form_pc').validate({
			rules: {
				pc_name: {
					required: true, 
					rangelength: [2,16],
				}, // Конец pc_name
			}, // Конец rules
			messages: {
				pc_name: {
					required: " Введите, пожалуйста, свое имя", 
					rangelength: "Ваше имя должно содержать от 8 до 16 символов",
				},
			
			} // Конец messages
		}); // Конец validate
	}) // Конец .on()
}); // Конец function
});
</script>

[ksa]

На обычных формах все работает, а на форме, загруженной ajax'ом, ничего не происходит

Без тестового примера не понять почему у тебя не работает делегирование...

[Daniel93]

А какой тестовый пример? Я просто делаю все на локальной машине, могу привести все скрипты, которые использую

Вот код формы:

<form action="handler/pc.php" method="POST" id='form_pc' name="form_pc">
	<label class="">Ваше имя:</label><br />
	<input name="pc_name" type="text" id="pc_name" size="36"><br />
	<label class="">Ваша фамилия:</label><br />
	<input name="pc_sname" type="text" id="pc_sname" size="36"><br />
	<label class="">Номер телефона:</label><br />
	<input name="pc_telephone" type="text" id="pc_telephone" size="36"><br />
	<label class="">Ваш адрес:</label><br />
	<input name="pc_add" type="text" id="pc_add" size="36"><br />
	<label class="">Опишите Вашу задачу:</label><br />
	<textarea name="pc_sub" rows="10" cols="50"></textarea><br />
	<input type="submit" name="pc_send" class="btn btn-large btn-primary" value="Отправить заявку">
</form>

Код валидации, который не работает

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../js/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$(function(){
	$(document).on('submit', '#form_pc', function() {
		$('#form_pc').validate({
			rules: {
				pc_name: {
					required: true, 
					rangelength: [2,16],
				}, // Конец pc_name
			}, // Конец rules
			messages: {
				pc_name: {
					required: " Введите, пожалуйста, свое имя", 
					rangelength: "Ваше имя должно содержать от 8 до 16 символов",
				},
			
			} // Конец messages
		}); // Конец validate
	}) // Конец .on()
}); // Конец function
});
</script>

Скрипт, которым загружается форма

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../css/dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
	
	$('.tabs a').click(function() {
		
		var $this = $(this);
		
		// Скрытие блока panel
		$('.panel').hide();
		$('.tabs a.active').removeClass('active');
				    
		
		$this.addClass('active').blur();	
		
		var panel = $this.attr('href');
		
		$(panel).fadeIn(250);
		
		
		return(false);
	}); // Конец click
	 
	
	$('.tabs li:first a').click();
	
$('.proba a').click(function(){
	var url = $(this).attr('href');
	$('#panel3').load(url);
	
	return false;
});	

}); // конец ready
</script>