Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.07.2015, 20:21
Интересующийся
Отправить личное сообщение для ru_rikki Посмотреть профиль Найти все сообщения от ru_rikki
 
Регистрация: 25.02.2015
Сообщений: 24

Ассоциативные массивы, не работает
Доброго времени суток, уважаемые форумчане!

есть функция валидации полей вида:

RikkiValidInput(this, /(^(\d+-)*\d+$)/, '', 'input-group has-success', 'input-group', '', '', '');
function RikkiValidInput(element, reg, aler, sClass, eClass, clr, idSpan, num) {
    if (reg.test(element.value)) {
        if (idSpan) {
            var count = num - element.value.length;
            $(idSpan).html(count);
            if (element.value.length <= num) {
                element.parentNode.className = sClass;
            } else {
                element.parentNode.className = eClass;
            }
        } else {
            element.parentNode.className = sClass;
        }
    } else if (element.value) {
        if (clr) {
            element.parentNode.className = clr;
            element.value = "";
            if (idSpan) {
                $(idSpan).hide();
            }
        } else {
            element.parentNode.className = eClass;
        }
        if (aler) {
            alert(aler);
        }
    }
    return false;
}


хочу привести к цивилизованному виду:
var numberSet {
	reg: /(^(\d+-)*\d+$)/,
	aler: '',
	sClass: 'input-group has-success',
	eClass: 'input-group',
	clr: '',
	idSpan: '',
	num: ''
}
RikkiValidation(this, numberSet);
function RikkiValidation(element, valSet) {
    if (reg.test(element.value)) {
        if (valSet.idSpan) {
            var count = valSet.num - element.value.length;
            $(valSet.idSpan).html(count);
            if (element.value.length <= valSet.num) {
                element.parentNode.className = valSet.sClass;
            } else {
                element.parentNode.className = valSet.eClass;
            }
        } else {
            element.parentNode.className = valSet.sClass;
        }
    } else if (element.value) {
        if (valSet.clr) {
            element.parentNode.className = valSet.clr;
            element.value = '';
            if (valSet.idSpan) {
                $(valSet.idSpan).hide();
            }
        } else {
            element.parentNode.className = valSet.eClass;
        }
        if (valSet.aler) {
            alert(valSet.aler);
        }
    }
    return false;
}


ну в общем, во втором исполнении не валидирует, где ошибка?
и насколько безопасно применять ассоциативные массивы?
Ответить с цитированием
  #2 (permalink)  
Старый 16.07.2015, 22:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от ru_rikki
где ошибка?
12 строка , консоль смотрите
Ответить с цитированием
  #3 (permalink)  
Старый 17.07.2015, 00:06
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

В самой первой строке еще ошибка. После объявления переменной должен идти оператор присвоения.
Ответить с цитированием
  #4 (permalink)  
Старый 17.07.2015, 06:31
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от ru_rikki
numberSet
Цивилизованный вид потребует изменить рендер полей. Реги прописываются в атрибут pattern, контекстные сообщения об ошибках в какой-нибудь data-err, с которым можно конкатенировать placeholder. Рендер ошибок - просто метод или функция с опциями куда чего пихать. Например

<input type="tel" pattern="([0-9][ ()+-]*){10,11}$" placeholder="+7 (123) 456-78-90" data-err="Введите номер телефона в федеральном формате 10-11 цифр" value="" name="some"/>

<!-- пример с реальной формы -->

<input data-index="2" maxlength="100" name="comeback[2]" pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$" errmsg="oшибка в адресе, образец: " placeholder="email@example.com" required="5" type="email">


Дальше все вроде понятно. Скрипт пробегает по полям, берет значение, паттерн, проверяет, если косяк - вызывает рендер ошибки, та берет из переданного инпута дата-ерр+плейсхолдер и выводит куда-то, и объявляет инвалидом этот инпут и не дает кнопке нажиматья.

Это модель для текстов. Номера, диапазоны, чекбоксы, радио и списки потребуют своей модели. Но самая жирная модель будет у файлового поля. Тем не менее схема передачи условий та же самая - все необходимое лежит в инпуте.

Выбор модели определяется типом поля.

Последний раз редактировалось kostyanet, 17.07.2015 в 06:36.
Ответить с цитированием
  #5 (permalink)  
Старый 17.07.2015, 06:55
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Разрешите задать свой вопрос, тоже касательно цивилизованных методов. Как сделать чтобы рулезы не размножались с каждым объектом, а существовали как общий для всех объектов метод, то есть прототипом?

О чем я выше писал, сейчас сделано вот так:

var FormField=function(el){

	var	type=		el.type,
		value=		el.value.trim(),
		pat=		el.getAttribute('pattern'),
		req=		el.getAttribute('required'),
		err=		el.getAttribute('errmsg')+"\n"+el.getAttribute('placeholder'),
		rules={
			'text':function(){
				var len=value.length;
				if(req && len<req)
					throw 'Минимальное количество знаков: '+req;
				else if(len && pat && !new RegExp(pat).test(value))
					throw err;
			},
			'select-one':function(){
				if(el.selectedIndex<0 && req)
					throw 'Необходимо выбрать из списка';
			},
			'select-multiple':function(){
				var mul=el.getAttribute('multiple'),
				for(var count=0, i=0; i<el.length; i++)
					if(el[i].selected)
						count++;
				if(req && count<req)
					throw 'Необходимо выбрать не меньше чем '+req;
				else if(mul && count>mul)
					throw 'Можно выбрать не больше чем '+mul;
			}
		};

	return {
		el:el,
		error:null,
		title:el.title,
		validate:function() {
			if(type in rules)
				rules[type]();
			else
				rules.text();
		}
	};
};


В блоке инициализации каждому полю сопоставляется этот объект и все объекты сохраняются в объект-массив по именам полей.

Как я понимаю приватный объект rules размножается, то есть копируется, а хотелось бы понять как его вынести в прототип. Спасибо.
Ответить с цитированием
  #6 (permalink)  
Старый 17.07.2015, 08:14
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

kostyanet, а если так:
validate: (type in rules) ? rules[type] : rules.text
Ответить с цитированием
  #7 (permalink)  
Старый 17.07.2015, 08:42
Интересующийся
Отправить личное сообщение для ru_rikki Посмотреть профиль Найти все сообщения от ru_rikki
 
Регистрация: 25.02.2015
Сообщений: 24

Decode, спасибо
Сообщение от рони Посмотреть сообщение
12 строка , консоль смотрите
в 12й строке все без изменений if (reg.test(element.value)) { как и в случае с работающим вариантом. Возможно синтаксис неверный, я плохо понимаю в js
kostyanet, попробую осилить, но сначала надо с элементарными вещами разобраться
area элементы уже местами использую благодаря bootstrap)
вот с исправлениями и все равно не валидирует:
echo "<script type='text/javascript'>
var numberSet = {
	reg: /(^(\d+-)*\d+$)/,
	aler: '',
	sClass: 'input-group has-success',
	eClass: 'input-group',
	clr: '',
	idSpan: '',
	num: ''
}
</script>";
$RIA_number = array(
	'simpleInGr' => '1', 
	'pTxt' => $locale['search103'],
	'pClass' => 'text-muted',
	'inputName' => 'on_number', 
	'divClass' => 'input-group',
	'spanTitle' => $locale['search104'],
	'inputClass' => 'form-control text-center', 
	'value' => '',
	'maxlength' => '20', 
	'placeholder' => $locale['search105'], 
	'js' => "onClick=\"clearInput(this, 'input-group', '');\" onKeyup=\"RikkiValidation(this, numberSet);\"", 
	'readonly' => ''
);
echo $RikkiInput->RikkiTxt($RIA_number);

function RikkiValidation(element, valSet) {
    if (reg.test(element.value)) {
        if (valSet.idSpan) {
            var count = valSet.num - element.value.length;
            $(valSet.idSpan).html(count);
            if (element.value.length <= valSet.num) {
                element.parentNode.className = valSet.sClass;
            } else {
                element.parentNode.className = valSet.eClass;
            }
        } else {
            element.parentNode.className = valSet.sClass;
        }
    } else if (element.value) {
        if (valSet.clr) {
            element.parentNode.className = valSet.clr;
            element.value = '';
            if (valSet.idSpan) {
                $(valSet.idSpan).hide();
            }
        } else {
            element.parentNode.className = valSet.eClass;
        }
        if (valSet.aler) {
            alert(valSet.aler);
        }
    }
    return false;
}

Последний раз редактировалось ru_rikki, 17.07.2015 в 08:48.
Ответить с цитированием
  #8 (permalink)  
Старый 17.07.2015, 09:07
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от ru_rikki
if (reg.test(element.value)) {
Откуда у вас reg берется? Ну был бы глобальным объектом, но все равно туда надо регу-то засунуть сперва.

ЗЫ Такое впечатление что вы дописываете что-то свое в какой-то фреймворк.
Ответить с цитированием
  #9 (permalink)  
Старый 17.07.2015, 09:19
Интересующийся
Отправить личное сообщение для ru_rikki Посмотреть профиль Найти все сообщения от ru_rikki
 
Регистрация: 25.02.2015
Сообщений: 24

нет это мое и не самый лучший вариант прототипа как я поняла. Первую функцию вместе с Rise вывели) теперь хочу сделать по типу php с хранением данных в ассоциативных массивах. Убрала reg все равно не валидирует

это не фреймворк, это код для быстрой записи html
public function RikkiTxt($RIA) {
	$RikkiTxt = "";
	if ($RIA['inputClass'] != 'hide') $RikkiTxt .= "<p".(!empty($RIA['pClass']) ? " class='".$RIA['pClass']."'" : "").">".(!empty($RIA['pTxt']) ? "<br>".$RIA['pTxt'] : "")."</p>".PHP_EOL;
	if (isset($RIA['simpleInGr']) || isset($RIA['countInGr']) || isset($RIA['rightInGr']) || isset($RIA['dblInGr'])) $RikkiTxt .= "<div id='idDi".$RIA['inputName']."' class='".$RIA['divClass']."'>".PHP_EOL;
	if (isset($RIA['simpleInGr']) || isset($RIA['dblInGr'])) {
		$RikkiTxt .= "<span class='input-group-addon'>".(!empty($RIA['spanTitle']) ? $RIA['spanTitle'] : "")."</span>".PHP_EOL;
	} elseif (isset($RIA['countInGr'])) {
		$RikkiTxt .= "<span class='input-group-addon'>".(!empty($RIA['spanTitle']) ? $RIA['spanTitle'] : "")."<span id='idSp".$RIA['inputName']."' class='".$RIA['countSpanClass']."'>".($RIA['maxlength']-2)."</span></span>".PHP_EOL;
	}
	$RikkiTxt .= "<input type='text' id='id".$RIA['inputName']."' name='".$RIA['inputName']."' class='".$RIA['inputClass']."' value='".$RIA['value']."'".(!empty($RIA['maxlength']) ? " maxlength='".$RIA['maxlength']."'" : "").(!empty($RIA['placeholder']) ? " placeholder='".$RIA['placeholder']."'" : "").(!empty($RIA['js']) ? " ".$RIA['js'] : "").(!empty($RIA['readonly']) ? " readonly" : "").">".PHP_EOL;
	if (isset($RIA['rightInGr']) || isset($RIA['dblInGr'])) {
		$RikkiTxt .= "<span class='input-group-addon'>".(!empty($RIA['eSpanTitle']) ? $RIA['eSpanTitle'] : "")."</span>".PHP_EOL;
	}
	if (isset($RIA['simpleInGr']) || isset($RIA['countInGr']) || isset($RIA['rightInGr']) || isset($RIA['dblInGr'])) $RikkiTxt .= "</div>".PHP_EOL; 
	return $RikkiTxt;
  }

но в JS я 0++ )

Последний раз редактировалось ru_rikki, 17.07.2015 в 09:26.
Ответить с цитированием
  #10 (permalink)  
Старый 17.07.2015, 09:29
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от ru_rikki
нет это мое
Это какая-то каша. Мое не мое, тут играть тут не играть, тут рыбу заворачивали...

Что вы называете валидацией - какой-то колхозный рендер ошибок. Он вообще тут не нужен в контексте обсуждения как сделать валидацию. Никого не колышет как эти ошибки рендерятся, как убираются, как все остальное.

Сообщение от ru_rikki
еперь хочу сделать по типу php с хранением данных в ассоциативных массивах

У вас рендер формы (полей) на сервере или в браузере? Ну, применительно к рубрике - поля уже есть в хтмле, или жаба их рисует по полученным откуда-то данным?

Дело в том что нет никакого смысла передавать одновременно и поля и эти массивы для контроля за полями, ибо можно на сервере раскидать все по хтмлю, а в браузере собрать все обратно. Это имеет смысл, ибо часть атрибутов работает и без скриптов, например maxlength и вообще в перспективе можно будет заюзать встроенную в браузеры валидацию когда она наконец там закрепится.

Ну вот, пример такого рода я привел - когда из массива в пхп мы делаем инпуты, а потом с инпутов собираем обратно в массив объектов со своими встроенными методами проверки в браузере.

Последний раз редактировалось kostyanet, 17.07.2015 в 09:32.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
innerHTML для TR в InternetExplorer не работает? Непонятливый Элементы интерфейса 3 15.10.2012 17:14
JS: работает на сервере, не работает из папки -majestic- Общие вопросы Javascript 2 02.08.2012 14:41
Не работает push! Динамическая вставка TSEH25 ExtJS 5 03.07.2012 13:00
jQyery функция странно работает! Midel Общие вопросы Javascript 4 08.04.2012 13:40
помогите найти ошибку (работает в IE но не работает в Firefox) Len4ik Javascript под браузер 2 11.05.2010 15:41