Master-X
Форум | Новости | Статьи
Главная » Форум » Программинг, Скрипты, Софт, Сервисы » 
Тема: Вопрос по jQuery
цитата
20/04/13 в 17:51
 alex.raven
В общем, непонятно мне, почему оно так работает. У меня есть форма, которая разделена на несколько шагов. У каждого шага своя валидация, т.е скрипт не пустит к следующему шагу, пока на текущем экране всё не будет валидно. Каждый шаг внутри отдельного <div>

Код:
<!-- Step 1 -->
<div id="step-1">
    <!-- Title -->
    <div class="control-block">
        <label class="control-label">Title <span class="required">*</label>
        <div class="controls">
            <input type="text" name="title" id="title" class="input-xxlarge" data-check="minlength" data-value="5" />
        </div>
    </div>
</div>

<!-- Step 2 -->
<div id="step-2">
    <!-- Price -->
    <div class="control-block">
        <label class="control-label">Price <span class="required">*</span></label>
        <div class="controls">
            <input type="text" name="price" id="price" class="input-xlarge" data-check="minlength" data-value="1" />
        </div>
    </div>
</div>


Пытаемся получить все элементы внутри <div id="step-1">:

Код:
function validateData(index)
{
    $("div#step-"+(index+1)+">,select,input[type=text],textarea").each(function()
    {
        console.log($(this).attr("id"));
    });
}


В консоль выводит:

Код:
title
price


Другими словами, находит и то, что внутри step-1, и то, что в step-2, хотя по логике должно находить только внутри step-1. Как с этим бороться? Всем плюсов в карму :-)

UPD: Почему у меня ">,select,input[type=text],textarea"? Опытным путём установлено, что первое в списке почему-то никогда не находится :-)
цитата
20/04/13 в 18:45
 FXIX
"div#step-"+(index+1)+">,select,input[type=text],textarea"

что за > ?
цитата
20/04/13 в 18:48
 FXIX
ну если не находится то простести сначала чтобы находилось.

$('div#step-'+'index+1')

а где index ты передаешь?

короче сначала просто выражение 'div#step-'+'index+1' выведи в консоль. глянь чо там он насчитал
цитата
20/04/13 в 18:52
 FXIX
гоню. не так. а вот так

$('div#step-'+(index+1))
цитата
20/04/13 в 20:02
 alex.raven
FXIX писал:
"div#step-"+(index+1)+">,select,input[type=text],textarea"

что за > ?


искать вложенные в div элементы

FXIX писал:
гоню. не так. а вот так

$('div#step-'+(index+1))


ну у меня так и есть, всё как раз находится, только вот почему-то и в step-1, и в step-2, хотя должно только в step-1

FXIX писал:
а где index ты передаешь?


Код:
$("#wizard").bwizard(
{
    validating: function (e, ui)
    {
        return validateData(ui.index);
    }
});


index - это номер шага, начиная с 0

FXIX писал:
короче сначала просто выражение 'div#step-'+'index+1' выведи в консоль. глянь чо там он насчитал


тут тоже всё нормально, результат этого выражения: div#step-1
цитата
20/04/13 в 20:21
 FXIX
ой бля. погодь. "Пытаемся получить все элементы внутри", тогда тебе не так надо делать, а:

$('div#step-'+'index+1' select, 'div#step-'+'index+1' input[type=text], 'div#step-'+'index+1' textarea")
цитата
20/04/13 в 20:46
 russiasexygirls
$("select,input[type=text],textarea","div#step-"+(index+1)+">").each(function()
цитата
20/04/13 в 21:48
 alex.raven
К сожалению, ни одно решение пока не помогло. Для наглядности, я выложил этот код на jsfiddle:

http://jsfiddle.net/alex_raven/Vmxkt/4/
цитата
20/04/13 в 22:19
 FXIX
http://jsfiddle.net/Vmxkt/5/
цитата
20/04/13 в 23:24
 alex.raven
FXIX писал:
http://jsfiddle.net/Vmxkt/5/


да, но стоит только добавить обвязку

Код:
<div id="step-1">
    <div class="control-block">
        <label class="control-label">Title</label>
        <div class="controls">
            <input type="text" name="title" id="title" />
        </div>
    </div>
</div>


как всё резко перестаёт работать...

Последний раз редактировалось: alex.raven (20/04/13 в 23:33), всего редактировалось 1 раз
цитата
20/04/13 в 23:33
 alex.raven
Решение найдено smail54.gif

Код:
$("div#step-1 > div > div > input, div#step-1 > div > div > textarea, div#step-1 > div > div > select").each(function()
{
    alert($(this).attr("id"));
});
цитата
20/04/13 в 23:41
 russiasexygirls
то решение которое вы написали - мне больно смотреть )
давайте попробуем еще раз
$("select,input[type=text],textarea","div#step-"+(index+1)).each(function()
цитата
21/04/13 в 00:10
 alex.raven
russiasexygirls писал:
то решение которое вы написали - мне больно смотреть )
давайте попробуем еще раз
$("select,input[type=text],textarea","div#step-"+(index+1)).each(function()


Мне тоже оно не очень нравится, но проблема оказалась совсем в другом месте. Для формы я использовал jQuery-плагин bwizard, который делает из формы визард:



Так вот, этот плагин, оказалось, херачит айди div-ов внутри себя, то есть

<div id="step-1">

После инициализации плагина - никакой уже не step-1. Проблема решилась использованием класса вместо айди, т.е <div class="step-1"> (ну хоть класс этот плагин не трогает) smail101.gif А за красивое решение спасибо! smail54.gif
цитата
21/04/13 в 00:52
 FXIX
alex.raven писал:
Решение найдено smail54.gif

Код:
$("div#step-1 > div > div > input, div#step-1 > div > div > textarea, div#step-1 > div > div > select").each(function()
{
    alert($(this).attr("id"));
});


ну тоже самое что я писал

$('div#step-'+'index+1' select, 'div#step-'+'index+1' input[type=text], 'div#step-'+'index+1' textarea")


т.е. внутри дива ищем определенные элементы

$("parent child1, parent child2, parent child3)

если так parent > child1 то первая вложенность, если так parent child1 то похуй какая
цитата
21/04/13 в 01:20
 alex.raven
Вот что получилось в результате: валидация формы при переходе к следующему/предыдущему шагу



Последний раз редактировалось: alex.raven (21/04/13 в 01:34), всего редактировалось 2 раз(а)
цитата
21/04/13 в 01:29
 FXIX
у меня возникли подозрения...а не усложнил ли ты задачу? trollface.png

тупо по onchange() чекай инпуты на пустоту да и пиздец. кнопку "дальше" hide(), или disable

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

ну и это. какбы дай дышать то людям smail101.gif. с этими формами заебут. "я просто блядь хочу ввести мыло и идите нахуй. без тухлых вопросов".

у одного клиента магаз был. ну каталог корзина товары...все как обычно. так вот. форма заказа товара ниибическая была. "заполните блядь ФИО, заполните блядь телефон, заполните блядь желаемое время звонка, заполните блядь адрес, заполните блядь страну город, заполните блядь емаил, заполните..." и вот такая же хуита стояла. всё required всё красным красным красным...

так когда блядь я эту хуиту снял - у него продажи в рост пошлиicon_smile.gif.
цитата
21/04/13 в 01:59
 alex.raven
FXIX: ну можно и так, но лично меня раздражает, когда я что-нибудь ввожу, а оно хуяк - и покрасилось, мол ошибка, исправляй smail101.gif

я ж эту форму не зря разбил на 5 шагов - обычно длинные формы вызывают у юзеров панический ужас. а там изначально было 32 поля... хоть это и админка...
цитата
21/04/13 в 12:52
 Sterx
использую почти всегда поиск через детей/родителей
цитата
21/04/13 в 13:55
 alex.raven
Может, я один заметил, что рефакторинг кода с использованием jQuery есть очень увлекательный процесс - как бы ты красиво и оптимально не было написано, почти всегда есть ещё более простой и красивый путь? smail101.gif

Мой валидатор (некрасивый и неоптимальный, но зато работающий) smail101.gif

Код:
function validateData(index)
{
    var err, valid=true, msg;
    // thanks, russiasexygirls icon_smile.gif
    $("select,input[type=text],textarea", "div.step-"+(index+1)).each(function()
    {
        var data_check = $(this).attr("data-check");
        var data_value = $(this).attr("data-value");
        var data_id = $(this).attr("id");
        var parent = $(this).closest(".control-group");
        parent.removeClass("error");
        var title = parent.find("label").text();
        $("#"+data_id+"-error").popover("hide");
        err = false;
        if (data_check!=undefined)
        {
            msg = "";
            if (data_check=="minlength")
            {
                data_value = parseInt(data_value);
                var value = $(this).val();
                if (value.length < data_value)
                {
                    err = true;
                    msg = msg + title+" is empty or too short";
                }
            }
            if (err)
            {
                var html = "<span class=\'popover-error\'>"+msg+"</span>";
                $(this).after('<span class="error" id="'+data_id+'-error" rel="popover" data-html="true" data-content="'+html+'"></span>');
                $("#"+data_id+"-error").popover("show");
                parent.addClass("error");
                $(this).popover("show");
                valid = false;
            }
            //console.log("data_id: "+data_id+", data-check: "+data_check+", data-value: "+data_value);
        }
    });
    return valid;
}


цитата
21/04/13 в 17:54
 FXIX
а чего нет готовых валидаторов? погугли. т.е. как это может выглядеть. условно псевдокодом.

форма:
<form>
<input type="text" name="name1" />
<input type="text" name="name2" />
</form>


правила:
$('name=name1').noempty().alpfadigest().range(1,6); // непустой, только буквенно-цифровые, длина от 1 до 6
$('name=name2').email().identical('name=name1'); // формат мыла, поле равно полю name1

ну и соответственно если не, то рядом с этим полем генериться алерт
цитата
21/04/13 в 18:41
 alex.raven
FXIX: я штук 5 пробовал, с plugins.jquery.com, но ни один не справился сразу с 4 условиями:

1. Поддержка разметки Twitter Bootstrap (куча вложенных div-ов)
2. Валидация определенной части формы, а не всей целиком
3. Чтоб минимум кода дописывать руками
4. Отображение ошибок путём подкрашивания поля + вывод текста ошибки в popover (из bootstrap.js)

Поэтому написал свой - но он отлично справляется с поставленными задачами.
цитата
21/04/13 в 22:04
 FXIX
ну я вообще думаю что проверки надо делать в одном месте, и надо это делать на сервере. один раз и железно. а эти хуйнюшки...с ними больше ебли. достаточно рядом с каждым полем help-text ебануть и хорош. в твиттер бутстрапе тем более они есть, аккуратненькие такие.

у меня вообще валидация во всех проектах в модели. она и должна быть там. если чо не так - форма вернулась с сообщениями об ошибках. заполненные поля при ф5 не стерлись не пропали. ну ты понял


Эта страница в полной версии