Запретить выполнение функций
 

Здравствуйте.
Есть такой скрипт:

(function($) {

    $(function() {

        $('.form').each(function() {
            var form = $(this),
                btn = form.find('.submit');

            form.find('.required').addClass('empty_field');

            // Функция проверки полей формы
            function checkInput() {
                form.find('.required').each(function() {
                    if ($(this).val() != '') {
                        $(this).removeClass('empty_field');
                    } else {
                        $(this).addClass('empty_field');
                    }
                });
            }

            // Функция подсветки незаполненных полей
            function lightEmpty() {
                form.find('.empty_field').css({
                    'border-color': '#d8512d'
                });
                setTimeout(function() {
                    form.find('.empty_field').removeAttr('style');
                }, 1500);
            }

            setInterval(function() {
                checkInput();
                var sizeEmpty = form.find('.empty_field').size();
                if (sizeEmpty > 0) {
                    if (btn.hasClass('disabled')) {
                        return false
                    } else {
                        btn.addClass('disabled')
                    }
                } else {
                    btn.removeClass('disabled')
                }
            }, 500);

            btn.click(function() {
                if ($(this).hasClass('disabled')) {
                    lightEmpty();
                    return false
                } else {
                    form.submit();
                }
            });

        });

    });

})(jQuery);

Он проверяет заполненность полей, а заодно, при пустых полях, добавляет к кнопке класс disabled.
Идем далее. Есть и такой скрипт: http://jsfiddle.net/jDYdH/2/. Который запрещает клики.
Мне нужно их объединить. Чтобы, пока не заполнены поля (т. е. на кнопке стоит класс disabled), при нажатии на кнопку ничего не происходило, кроме подсветки незаполненных полей.
Как я понял, за это отвечает вот эта строчка из второго примера:

$('.disabled').off('click');

Так вот, вопрос. В какое место верхнего кода вставить эту строчку, чтобы получилось так, как мне надо?

Объясню проще.
На кнопку отправки формы (.submit), помимо вышеуказанного скрипта повешен еще один скрипт. Как сделать, чтобы этот «еще один скрипт» не выполнялся при клике, пока на кнопке стоит дополнительный класс disabled?
А, как только этот класс удалится с помощью первого скрипта (после заполнения всех полей), можно было выполнить второй скрипт.

Потому что надо вешать не на onclick, а на onsubmit. Что вам, что "тому скрпту". И помимо("вместо" на самом деле) класса "disabled" ставить кнопке атрибут "disabled". Тогда если кнопка disabled никакого submit в принципе не пройдёт.
Умные люди придумали стандарт html, пользуйтесь им, а не лепите говновелосипеды.

Не совсем понял, ну да ладно.
Можно проще. Сделать изменения в том втором скрипте, который привязан к этой кнопке.
Схематично так:

Если у <button> класс "disabled",
    то скрипт не выполняется.
Если у <button> НЕТ класса "disabled",
    то скрипт выполняется.
...
И дальше идет сам скрипт.
...

В JS я плохо понимаю, поэтому весь вопрос в том, как, вышеприведенный схематичный пример написать на JS?

Если у кнопки дизаблед ее считайте вообще нет. Так понятно? Никакие клики-шмики, никаких субмитов - ничего не будет происходить пока кнопка запрещена.

Следовательно когда "та функция" снимет disabled то юзер на конец то сможет ее нажать. Если сей факт как-то отражается в интерфейсе и юзер не дебил - он нажмет.

Короче говоря "другой скрипт" вам не нужен, ему нечего запрещать, все уже запрещено до него. Вам же с первого раза об этом написали выше.

Кстати, в FF если единственный субмит на форме дизаблед, вы даже из скрипта не сможете нажать form.submit()

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

У нее просто класс "disabled", а не атрибут. Т. е. она прописывается так: <button class="disabled">, а не так: <button disabled>.
Поэтому, все «клики-шмики» работают.
Если вы и комментатор выше имели в виду, что в самом скрипте надо заменить добавление класса "disabled" на добавление атрибута "disabled", то я с радостью, но не знаю как.
Скрипт, который добавляет класс в первом посте. Если поможете, буду благодарен.

Но тут еще другой вопрос.
Этот скрипт для того и создан, чтобы при нажатии на кнопку, при незаполненных полях, их рамка подсвечивалась красным. Но если кнопку вообще отключить, то этого не будет происходить.
Собственно, вот живой пример: http://novi.co/test/bionica/

"Комментатор выше" имел в виду, что валидацию формы надо делать на submit, а не на click. Тогда, во-первых, не придется велосипедить, а во-вторых...не забывайте, что submit происходит не только по клику на кнопку, но и по нажатию Enter в input type="text" и ему подобных. Следовательно, нет гарантии, что не будет "никаких субмитов" если запретить лишь кнопку.
вот и следствие велосипедостроения. Перехватывайте submit формы, как писал "комментатор выше".

Ну, в целом понятно.
Но здесь, получается, надо все переписывать заново. а я в этом не понимаю. Поэтому и хотел обойтись малой кровью.

То есть череж ж сделано.

Через голову делается так: кнопке назначается атрибут disabled, а в css этот квази силектор получает оформление.

Затем функция валидации запускается по желаемым событиям, например onchange и oninput. Именно последний дает фишку что как только последний правильный символ введен - кнопочка оживает.

Однако по oninput сообщение об ошибке подавляется, иначе ж задолбает после каждого нажатия. А мессага вылезает когда юзер запустил change и допустил ошибку.

По onchange кнопка тоже может ожить, но кто ж будет нажимать мертвую кнопку - не станешь же писать нажмите мертвую кнопку, она оживет.

Поскольку у вас проверяется только на пусто и никаких-таких мессаг нет вообще, то перепишите нормально и не парьтесь, или попросите помочь. На пусто проверить рекуиред по oninput без всякого онченчж можно хоть 100500 полей (народ все равно с такой скоростью не набирает, это боль).

Я в JQ слаб, беру ваш шаблон:

// Функция проверки полей формы
// надо завести агрегатор, переменную в которую соберется финальный результат
// но поскольку у вас уже все с условиями, это очень просто:
            function checkInput() {
                var dis = false;
                form.find('.required').each(function() {
                    if ($(this).val() != '') {
                        $(this).removeClass('empty_field');
                    } else {
                        $(this).addClass('empty_field');
                        dis = true;
                    }
                });
                submit.disabled=dis;
            }

Подразумевается что элемент submit уже найден и лежит в переменной submit.

Вешаете checkInput() на load и на oninput. После загрузки скрипт нарисует все рамочки, а в процессе ввода будет их стирать.

Disclaimer, косяки в коде возможны.

Вы говорите, что слабы в JS. А я, так вообще ничего не понимаю.
Если не сложно, можно целиком? С учетом моего кода:

(function($) {

    $(function() {

        $('.form').each(function() {
            var form = $(this),
                btn = form.find('.submit');

            form.find('.required').addClass('empty_field');

            // Функция проверки полей формы
            function checkInput() {
                form.find('.required').each(function() {
                    if ($(this).val() != '') {
                        $(this).removeClass('empty_field');
                    } else {
                        $(this).addClass('empty_field');
                    }
                });
            }

            // Функция подсветки незаполненных полей
            function lightEmpty() {
                form.find('.empty_field').css({
                    'border-color': '#d8512d'
                });
                setTimeout(function() {
                    form.find('.empty_field').removeAttr('style');
                }, 1500);
            }

            setInterval(function() {
                checkInput();
                var sizeEmpty = form.find('.empty_field').size();
                if (sizeEmpty > 0) {
                    if (btn.hasClass('disabled')) {
                        return false
                    } else {
                        btn.addClass('disabled')
                    }
					
                } else {
                    btn.removeClass('disabled')
                }
            }, 500);

            btn.click(function() {
                if ($(this).hasClass('disabled')) {
                    lightEmpty();
                    return false
                } else {
                    form.submit();
                }
            });

        });

    });

})(jQuery);

Где прописывать приведенный вами код?

Сама форма выглядит так:

<form class="form" action="send.php" method="post">
	<fieldset><legend>Заказ звонка</legend>
		<input class="field-name required" placeholder="Введите ваше имя" name="name" type="text">
		<input class="field-phone required" placeholder="Введите телефон" name="phone" type="text">
		<button class="submit" name="submit" type="submit">Отправить заявку</button>
	</fieldset>
</form>

В ней, я так понимаю, менять ничего не надо.

Балин, там JQ как-то не приросла, в песочнице, не знаю как подключить. Без JQ, вот смотрите сам принцип

http://learn.javascript.ru/play/cJPZvb

Функция всего 1. Она проверяет, фтыкает и кнопку оживляет. Начинаете набирать текст - красная рамка исчезает, сотрете текст - появится снова, когда оба поля будут с текстом - кнопка оживет, если стереть текст где-то - сдохнет.

Я так понимаю эту свою чудесную проверку вы нытырили, так что наверно вам все равно по классам там силекты или по id. Иначе делайте по классам сами. ЧТобы атрибут required не сверкал в html5 браузерах самостоятельно, его надо забить в css.

Почему-то не работает: http://novi.co/test/bionica/ Если при нажатии на кнопку, при пустых полях, всплывает окошко об успешной отправке, значит кнопка не disabled. Иначе вообще ничего не происходило бы
У вас в примере все работает, а у меня почему-то нет.

Вы ж глазами видите дизаблед она или не видите? Короче, если вы скопипастить не можете, то просите написать за деньги. Копипастить надо _все_ а не только скрипт, ибо он работает по id и атрибутам, а не по сраному css.

Ну что ж я дурак что ли, естественно все скопипастил, в точности.
Да, кнопка, при незаполненных полях, disabled. Но, когда заполнишь, не отправляет.

Я уже начал сомневаться. Вы action вернули на место? То есть скопипастить дело тоже творческое, понимаете? Я выкосил action формы на всякий случай, ну мало ли там обматерят. Верните если не заметили что его там нет. И главное - кнопка-то активная становится или как?

Дело в том что я ж не могу вам прямо все правильно написать, или давайте ТЗ.

И самая мякотка - вы на сервере вообще не проверяете? Собственно если форма не работает по XMLHttp, то и проверять на JS особенно нечего - ушла пустая, с сервера строго сказали - тут не заполнено мать вашу.

action разумеется вернул. Кнопка становится активной, но не отправляет.
Естественно проверяю на сервере.

Да дело не в ТЗ. Там все просто:
1. В спокойном незаполненном состоянии поля не подкрашиваются, кнопка неактивна.
2. При фокусе поле красное (рамка), кнопка неактивна.
3. Начали писать — рамка зеленая, кнопка неактивна.
4. Все заполнили — соответственно обе рамки зеленых, кнопка стала активной и при нажатии отправляет форму.

Если это поможет, на поле телефон висит сторонний скрипт для маски телефона, а на кнопке висит скрипт для всплывающего окна об успешной отправке.

Так нельзя делать, так не делают, это похоже на наеб...у. Типа все норм, можно жать - нажал, тебя нах послали.

Все что требуется заполнить -- выделяется _сразу_ чтоб было понятно что надо заполнить.

Вы где такой морально-уродский скрипт подцепили?

Почему не отправляет - это вы сами ищите. На сабмите там никаких вообще перехватов, если кнопка активна - то уйдет. Сделайте ее по умолчанию активной и нажимайте как будто все заполнили.

Что касается фильтров телефонов и имен - нафиг там какие-то скрипты еще? Той же самой функцией все, одной, проверяется. Надо только добавить еще одно условие - чтоб регулярное выражение возвращало true, а сам паттерн берется из атрибута pattern. Например для проверки на длину pattern="{3,}" - не менее 3 символов, pattern="{10,11}" от10 до 11.

Есть специальный сайт где коллекционируют эти паттерны. http://html5pattern.com/

Это не значит что только HTML5 браузер поймет - любой, надо только брать var pat = new RegExp(field.getAttibute('pattern'))

Да при чем тут кнопка? С любого ввода типа text по Enter формы отправляются по умолчанию. Юзер может и не знать как выглядит disabled, встал на поле и нажал Ентер. Не важно, так чтобы не показывать где ввод обязательный - делают только моральные уроды.

Знаете как это лечится? Берется такой программист и сажается набивать БД через свой собственный зло...учий интерфейс. Через неделю он все перепишет по-человечески. А пока одни пишут, другие юзают - гавно и случается.

С паттернами http://learn.javascript.ru/play/IjR4h

Но там с телефонами я не знаю как вам надо, взял типовой шаблон 123-456-7898

Насчет выдележа рамочками. Конечно не обязательно именно рамочками выделять, звезды можете просто поставить. А чтоб при запуске функция дизаблила, но не разукрашивала (если этого не надо, если есть звезды), то просто проверяйте кто ее вызвал:

if(event.target) // это значит по событию, а иначе значит из кода вызвана. И надо туда добавить этот event в ()

Не все так просто. Общим чохом все сводится в одну функцию, а чтобы по-отдельности проверять надо 2 и брать из ивента элемент, фиксировать где-то ошибку, затем мониторить ошибки собирая этот dis &= error и тп. Короче усложнение, предлагаю оставить чохом, или искать нормальный скрипт. Свой не дам.