16.07.2015, 20:21
|
|
Интересующийся
|
|
Регистрация: 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;
}
ну в общем, во втором исполнении не валидирует, где ошибка?
и насколько безопасно применять ассоциативные массивы?
|
|
16.07.2015, 22:06
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от ru_rikki
|
|
где ошибка?
|
12 строка , консоль смотрите |
|
17.07.2015, 00:06
|
|
Профессор
|
|
Регистрация: 31.01.2015
Сообщений: 576
|
|
|
В самой первой строке еще ошибка. После объявления переменной должен идти оператор присвоения.
|
|
17.07.2015, 06:31
|
|
Профессор
|
|
Регистрация: 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.
|
|
17.07.2015, 06:55
|
|
Профессор
|
|
Регистрация: 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 размножается, то есть копируется, а хотелось бы понять как его вынести в прототип. Спасибо.
|
|
17.07.2015, 08:14
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 458
|
|
kostyanet, а если так:
validate: (type in rules) ? rules[type] : rules.text
|
|
17.07.2015, 08:42
|
|
Интересующийся
|
|
Регистрация: 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.
|
|
17.07.2015, 09:07
|
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
|
Сообщение от ru_rikki
|
|
if (reg.test(element.value)) {
|
Откуда у вас reg берется? Ну был бы глобальным объектом, но все равно туда надо регу-то засунуть сперва.
ЗЫ Такое впечатление что вы дописываете что-то свое в какой-то фреймворк. |
|
17.07.2015, 09:19
|
|
Интересующийся
|
|
Регистрация: 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.
|
|
17.07.2015, 09:29
|
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
|
Сообщение от ru_rikki
|
|
нет это мое
|
Это какая-то каша. Мое не мое, тут играть тут не играть, тут рыбу заворачивали...
Что вы называете валидацией - какой-то колхозный рендер ошибок. Он вообще тут не нужен в контексте обсуждения как сделать валидацию. Никого не колышет как эти ошибки рендерятся, как убираются, как все остальное.
|
Сообщение от ru_rikki
|
|
еперь хочу сделать по типу php с хранением данных в ассоциативных массивах
|
У вас рендер формы (полей) на сервере или в браузере? Ну, применительно к рубрике - поля уже есть в хтмле, или жаба их рисует по полученным откуда-то данным?
Дело в том что нет никакого смысла передавать одновременно и поля и эти массивы для контроля за полями, ибо можно на сервере раскидать все по хтмлю, а в браузере собрать все обратно. Это имеет смысл, ибо часть атрибутов работает и без скриптов, например maxlength и вообще в перспективе можно будет заюзать встроенную в браузеры валидацию когда она наконец там закрепится.
Ну вот, пример такого рода я привел - когда из массива в пхп мы делаем инпуты, а потом с инпутов собираем обратно в массив объектов со своими встроенными методами проверки в браузере.
Последний раз редактировалось kostyanet, 17.07.2015 в 09:32.
|
|
|
|
