Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.08.2015, 19:46
Новичок на форуме
Отправить личное сообщение для evtyshenkosemen Посмотреть профиль Найти все сообщения от evtyshenkosemen
 
Регистрация: 16.08.2015
Сообщений: 5

jQuery Validation Plugin для валидации динамических input'ов
Приветствую Вас, профессионалы 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
Код прилагаю в архиве. Очень надеюсь на вашу помощь.
Спасибо!
Вложения:
Тип файла: zip site.zip (217.7 Кб, 6 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 16.08.2015, 22:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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 })
Ответить с цитированием
  #3 (permalink)  
Старый 17.08.2015, 03:58
Новичок на форуме
Отправить личное сообщение для evtyshenkosemen Посмотреть профиль Найти все сообщения от evtyshenkosemen
 
Регистрация: 16.08.2015
Сообщений: 5

рони, Ваш код понятен! На будущее запомню Спасибо, но он не работает в данной ситуации... Скорее всего в плагине нет возможности дописывать правила для таблиц с одинаковым id. Есть ли какой то способ это исправить?
Ответить с цитированием
  #4 (permalink)  
Старый 17.08.2015, 11:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

evtyshenkosemen,
count пропадает в примере из zip
в add_well() он не доходит.
это не причина но мешает.
Ответить с цитированием
  #5 (permalink)  
Старый 17.08.2015, 17:31
Новичок на форуме
Отправить личное сообщение для evtyshenkosemen Посмотреть профиль Найти все сообщения от evtyshenkosemen
 
Регистрация: 16.08.2015
Сообщений: 5

Сообщение от рони Посмотреть сообщение
count пропадает
рони, странно, я тестировал в Google Chrome, Yandex, IE переменная на месте.
А в чем причина? Какой способ решения этой проблемы? =/
Ответить с цитированием
  #6 (permalink)  
Старый 17.08.2015, 17:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

evtyshenkosemen,
скорее всего где-то эта переменная затирается(используется ещё)
Ответить с цитированием
  #7 (permalink)  
Старый 17.08.2015, 18:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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

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

Последний раз редактировалось рони, 17.08.2015 в 18:12.
Ответить с цитированием
  #8 (permalink)  
Старый 17.08.2015, 18:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от рони
count пропадает в примере из zip
проблема была у меня видимо, сейчас нормально.
Ответить с цитированием
  #9 (permalink)  
Старый 17.08.2015, 18:52
Новичок на форуме
Отправить личное сообщение для evtyshenkosemen Посмотреть профиль Найти все сообщения от evtyshenkosemen
 
Регистрация: 16.08.2015
Сообщений: 5

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

остальные пропишите по образцу.
Спасибо большое! Все работает замечательно!!!
Ответить с цитированием
  #10 (permalink)  
Старый 18.08.2015, 10:36
Новичок на форуме
Отправить личное сообщение для vsenetak Посмотреть профиль Найти все сообщения от vsenetak
 
Регистрация: 16.04.2015
Сообщений: 9

Настройка 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
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jQuery для загрузки страницы в <div> Dr.Holerik jQuery 12 11.10.2016 17:36
есть ли готовая дериктива для валидации числа с плавающей головкой fat Angular.js 10 06.12.2013 00:17
Утечка памяти в плагине для jQuery. TheWanderer jQuery 0 20.11.2013 16:22
Работа для знатока jQuery virtualbrest Работа 0 24.07.2013 16:05
JQuery плагин Validation. Переопределение правил валидации формы. Виталик jQuery 3 07.06.2009 13:32