Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Валидация поля ввода (https://javascript.ru/forum/project/56572-validaciya-polya-vvoda.html)

ru_rikki 23.06.2015 11:44

Валидация поля ввода
 
Доброго времени суток, уважаемые форумчане!

Придумала панацею для различных валидаций полей ввода:
Например: формат ввода 1-1-1-1 (число-число-число-число)
...onKeyup=\"RikkiValidInput(this, /(^[0-9]{1,2}([\-]{1}[0-9]{1,5}){3}$)/, '', 'input-group has-success', '');\"...
В данном случае без сообщения об ошибочном вводе и не используется класс при ошибочном вводе
пример здесь http://citr.tk
function RikkiValidInput(element, reg, aler, sClass, eClass) {
    var v = document.getElementById(element.id).value;
    var n = document.getElementById(element.id).name;
    var isValid = reg;
    if (isValid.test(v)) {
        document.getElementById(n).className = sClass;
    } else {
		if (!$.isEmptyObject(eClass)) {
			document.getElementById(n).className = eClass;
		}
        if (!$.isEmptyObject(aler)) {
            alert(aler);
        }
    }
    return false;
}


Если есть мнения или уже готовые функции в улучшенном варианте, с удовольствием протестировала бы.

jackdempsey2015 23.06.2015 12:49

Цитата:

Сообщение от ru_rikki
формат ввода 1-1-1-1 (число-число-число-число)

конкретно для этого формата, по-моему достаточно:
/^(\d+-)*\d+$/

ru_rikki 23.06.2015 13:08

сделала, не самый удачный пример был) зато натолкнул на правильные мысли

итого:
onKeyup=\"RikkiValidInput(this, /(^(\d+-)*\d+$)/, '', 'input-group has-success', 'input-group');\"
onMouseout=\"RikkiValidInput(this, /(^[0-9]{1,2}([\-]{1}[0-9]{1,5}){3}$)/, '', 'input-group has-success', 'input-group has-error');\"

function RikkiValidInput(element, reg, aler, sClass, eClass) {
    var v = document.getElementById(element.id).value;
    var n = document.getElementById(element.id).name;
    var isValid = reg;
    if (isValid.test(v)) {
        document.getElementById(n).className = sClass;
    } else if (!$.isEmptyObject(v)) {
        document.getElementById(n).className = eClass;
        if (!$.isEmptyObject(aler)) {
            alert(aler);
        }
    }
    return false;
}


здесь два события надо ставить с разными рег выражениями, что лишний раз подтверждает удобство функции

есть ли еще у кого-нибудь какие-нибудь замечания, пожелания?

ru_rikki 23.06.2015 19:46

Цитата:

Сообщение от Rise (Сообщение 376195)
ru_rikki, с этим $.isEmptyObject надо что-то решать)

а как проверить на пустоту, и почему его нельзя использовать, искала аналог empty из php, или в js другая логика и достаточно != '' ?
мне бы если честно хотелось еще document.getElementById заменить на что-нибудь побыстрее, только вот не знаю как правильно, в jQuery я новичок, только прототайпы всякие не надо предлагать, мне достаточно bootstrapa с jQuery)

ru_rikki 23.06.2015 20:44

Цитата:

Сообщение от Rise (Сообщение 376313)
ru_rikki, достаточно !v и !aler

сделала, только выкидывает окна пустые(
можно посмотреть сейчас http://citr.tk и красного цвета

ru_rikki 23.06.2015 21:10

класс! спасибо, вообще не могу врубиться в эту js-логику))) и быстрее работать стало, супер! какое-то мученье, как только надо что-то на js написать сразу ступор и зависание) и вообще большое желание бросить все) А document.getElementById ничем нельзя заменить?

ru_rikki 24.06.2015 12:00

Цитата:

Сообщение от Rise (Сообщение 376382)
ru_rikki, ссылка

спасибо, оставлю document.getElementById, пробовала так вызывать: $('#' + element.id).empty(); если во входных данных задано как this, то ничего не получается, вобщем окончательный вид функции:
function RikkiValidInput(element, reg, aler, sClass, eClass, clr) {
    var v = document.getElementById(element.id).value;
    var n = document.getElementById(element.id).name;
    var isValid = reg;
    if (isValid.test(v)) {
        document.getElementById(n).className = sClass;
    } else if (v) {
        document.getElementById(n).className = eClass;
        if (clr) {
            document.getElementById(element.id).value = "";
        }
        if (aler) {
            alert(aler);
        }
    }
    return false;
}

onKeyup=\"RikkiValidInput(this, /(^[A-ZА-Яa-zа-я0-9№'\(\)\,\.\_\:\s\-]*?$)/, '".$locale['e45']."', 'input-group has-success', 'input-group has-error', 'input-group');\"

или другое поле

onKeyup=\"RikkiValidInput(this, /(^(\d+-)*\d+$)/, '', 'input-group has-success', 'input-group', '');\"
onMouseover=\"RikkiValidInput(idOn_number, /(^[0-9]{1,2}([\-]{1}[0-9]{1,5}){3}$)/, '', 'input-group has-success', 'input-group has-error', '');\"

ru_rikki 24.06.2015 18:15

Rise, да вы просто шайтан!
вот оно в муках рожденное
function RikkiValidInput(element, reg, aler, sClass, eClass, clr) {
    if (reg.test(element.value)) {
        element.parentNode.className = sClass;
    } else if (element.value) {
        element.parentNode.className = eClass;
        if (clr) {
            element.parentNode.className = clr;
            element.value = "";
        }
        if (aler) {
            alert(aler);
        }
    }
    return false;
}

Не могу добавить вам еще плюс в карму, уже 2 раза кому то поставила, все равно требует что кому-то еще надо ставить(
---
Капец, уже третий отзыв написала и даже с комментарием и все равно не могу поставить плюсик(

ru_rikki 24.06.2015 20:33

Цитата:

Сообщение от Rise (Сообщение 376386)
ru_rikki,
document.getElementById(element.id). element.
document.getElementById(n). element.parentNode.
isValid. reg.

это в мобильных браузерах тоже будет работать? похоже что во всех

У меня еще вопрос, есть функция
function RikkiButtonDis(obj, button) {
    var num = 1;
    for (var i = 0; i < obj.elements.length; i++) {
        if (obj.elements[i].type == 'checkbox') {
            if (obj.elements[i].checked === true) {
                document.getElementById(button).disabled = false;
            } else {
                num++;
                if (obj.elements.length - num > 3) {
                    document.getElementById(button).disabled = true;
                }
            }
        }
    }
    return false;
}

$misc_filter = "onChange=\"yahooRikki(this); RikkiButtonDis(this,'#idRikkiSpread');\"";
echo "<fieldset id='spFilter' ".$misc_filter.">\n";
...
echo "</fieldset>\n";
...
echo "<input  id='idRikkiSpread' type='submit' name='RikkiSpread' class='btn btn-default' disabled='true' value='".$locale['search53']."'>\n";

Как здесь убрать document.getElementById?
посмотреть можно здесь
http://rikki.xp3.biz/search.php?status=2&region=&set=&loc1=&loc2=&loc3= &zone1=&zone2=&zone3=&disp=1&type1=010&type2=013&t ype3=014
если нажать на ссылку Сбросить все диапазоны и кнопку найти, затем на новой странице результатов нажать Перейти к фильтрам и выбрать какой-нибудь радиобатон лучше города/районы

Сама сделала :)
function RikkiButtonDis(obj, button) {
    var num = 0;
    for (var i = 0; i < obj.elements.length; i++) {
		if (obj.elements[i].type == 'checkbox') {
			if (obj.elements.length - num == obj.elements.length) {
				$(button).prop('disabled', true);
				num++;
			} else if ((obj.elements[0].checked === true) || (obj.elements[i].checked === true)) {
				$(button).prop('disabled', false);
			}
		}	
    }
    return false;
}


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