Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   jQuery Validation Plugin для валидации динамических input'ов (https://javascript.ru/forum/jquery/57727-jquery-validation-plugin-dlya-validacii-dinamicheskikh-input%27ov.html)

evtyshenkosemen 16.08.2015 19:46

jQuery Validation Plugin для валидации динамических input'ов
 
Вложений: 1
Приветствую Вас, профессионалы JavaScript!
Я мало программировал на JS(Ну точнее начинаю)...
Ммм, чему такое долгое вступление? О чем нужно спросите) Итак, к сути:]

На странице есть два блока с id="well_[номер]".
Каждое из них состоит из трех input полей (cost, name, description).
Схематично это выглядит так:
[well_1]
(cost_1)
(name_1)
(description_1)
[/well_1]
[well_2]
(cost_2)
(name_2)
(description_2)
[/well_2]
Эти блоки (их может быть более 2-х) загружаются из базы. Генерируется HTML и JS код интерпретатором PHP.
HTML - сами блоки
JS - код валидации для сгенерированных блоков(Ниже пример кода)
$("#bonuses").validate({
		rules: {
			cost_1: {
				required: true,
				digits: true,
				minlength: 1,
				maxlength: 10
			},
			name_1: {
				required: true,
				only_allowed_characters: true,
				minlength: 3,
				maxlength: 20
			},
			description_1: {
				required: true,
				only_allowed_characters: true,
				minlength: 20,
				maxlength: 200
			},
			cost_2: {
				required: true,
				digits: true,
				minlength: 1,
				maxlength: 10
			},
			name_2: {
				required: true,
				only_allowed_characters: true,
				minlength: 3,
				maxlength: 20
			},
			description_2: {
				required: true,
				only_allowed_characters: true,
				minlength: 20,
				maxlength: 200
			},
		},
	})
});

Все замечательно работает, формы проверяются. В плагин jQuery Validation путем проб и ошибок добавлен код, который активирует всплывающие сообщения плагина tipsy.

Проблема в том, что новые блоки well_№, которые добавляются в страницу на лету, не представляется возможности проверять так же, как и добавленные не на лету=[ Ибо (видимо) нельзя повторно добавить правила для той же таблицы и новых полей...

Пробовал добавлять следующим кодом:
eval'
$().ready(function() {
	$("#bonuses").validate({
		rules: {
			cost_'+count+': {
				required: true,
				digits: true,
				minlength: 1,
				maxlength: 10
			}, 
			name_'+count+': { 
				required: true, 
				only_allowed_characters: 
				true, minlength: 3, 
				maxlength: 20 
			}, 
			description_'+count+': {
				required: true, 
				only_allowed_characters: true, 
				minlength: 20, 
				maxlength: 200 
			}, 
		}, 
	}) 
});
';

Через eval(); Возможно криво и говнокодно, но с моими PHP'шными мозгами это был единственный выход... Код не давал ни ошибок ни результата...

Прошу помощи у гуру JavaScript и jQuery.
Используется плагин jQuery Validation
Код прилагаю в архиве. Очень надеюсь на вашу помощь.
Спасибо!

рони 16.08.2015 22:22

evtyshenkosemen,
var  count = 3,
      rules = {};
      rules['cost_'+count] = {
				required: true,
				digits: true,
				minlength: 1,
				maxlength: 10
			};
      rules['name_'+count] = {
				required: true,
				only_allowed_characters:
				true, minlength: 3,
				maxlength: 20
			}
      rules['description_'+count] = {
				required: true,
				only_allowed_characters: true,
				minlength: 20,
				maxlength: 200
			};
      $("#bonuses").validate({'rules': rules })

evtyshenkosemen 17.08.2015 03:58

рони, Ваш код понятен! На будущее запомню:) Спасибо, но он не работает в данной ситуации... Скорее всего в плагине нет возможности дописывать правила для таблиц с одинаковым id. Есть ли какой то способ это исправить?:-?

рони 17.08.2015 11:48

evtyshenkosemen,
count пропадает в примере из zip
в add_well() он не доходит.
это не причина но мешает.

evtyshenkosemen 17.08.2015 17:31

Цитата:

Сообщение от рони (Сообщение 384547)
count пропадает

рони, странно, я тестировал в Google Chrome, Yandex, IE переменная на месте.
А в чем причина? Какой способ решения этой проблемы? =/

рони 17.08.2015 17:48

evtyshenkosemen,
скорее всего где-то эта переменная затирается(используется ещё)

рони 17.08.2015 18:02

evtyshenkosemen,
вместо вашего eval пропишите три правила
пример добавления правила для нового элемента
$('#name_'+count).rules('add', {
  required: true,
  only_allowed_characters:true,
  minlength: 3,
  maxlength: 20
  })

остальные пропишите по образцу.

рони 17.08.2015 18:09

Цитата:

Сообщение от рони
count пропадает в примере из zip

проблема была у меня видимо, сейчас нормально.

evtyshenkosemen 17.08.2015 18:52

Цитата:

Сообщение от рони (Сообщение 384594)
вместо вашего eval пропишите три правила
пример добавления правила для нового элемента
$('#name_'+count).rules('add', {
  required: true,
  only_allowed_characters:true,
  minlength: 3,
  maxlength: 20
  });

остальные пропишите по образцу.

Спасибо большое! Все работает замечательно!!!:thanks: :dance:

vsenetak 18.08.2015 10:36

Настройка jQuery Validation
 
Позвольте я в вашей теме спрошу.
Помогите настроить плагин jquery validation. Необходимо изменить некоторые регулярки, например поле email по умолчанию считается валидным в виде "q@q",
описан так: "methods: {email: function( value, element ) {return this.optional( element ) || /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i.test( value );
},}"? предположим, хочу чтоб вначале было минимум три символа перед "собакой"
меняю регулярку внутри "methods:" файла "jquery.validate.js" на:
"methods: {email: function( value, element ) {return this.optional( element ) || /^[a-z0-9_-]{3, }@[a-z0-9-]+\.[a-z]{2,6}$/i.test( value );
},}"
но результат валидации не меняется. Пробовал добавить свой метод, дописал внутрь methods: "mydate: function(value, element){ return this.optional(element) || /^[a-zа-я]+$/i.test(value);}" , в скрипт, в rules дописал: "newinput: {required: true, mydate: true}".
При отправке срабатывает required, но если добавить хоть один символ (даже цифру) в поле, то по клику на submit форма отправляется несмотря на то, что остальные поля невалидны, при чем уведомления об отправке как при штатной отправке не появляется. Что я делаю не так? Посмотреть можно тут: son.topdetal.com.ua/tab/myvalid/2.html


Часовой пояс GMT +3, время: 11:59.