Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 23.10.2014, 10:31
Аспирант
Отправить личное сообщение для Szorstki Посмотреть профиль Найти все сообщения от Szorstki
 
Регистрация: 15.02.2012
Сообщений: 51

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

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

Сообщение от Szorstki
У нее просто класс "disabled", а не атрибут.
То есть череж ж сделано.

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

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

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

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

Поскольку у вас проверяется только на пусто и никаких-таких мессаг нет вообще, то перепишите нормально и не парьтесь, или попросите помочь. На пусто проверить рекуиред по oninput без всякого онченчж можно хоть 100500 полей (народ все равно с такой скоростью не набирает, это боль).
Ответить с цитированием
  #13 (permalink)  
Старый 23.10.2014, 11:52
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Я в 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, косяки в коде возможны.
Ответить с цитированием
  #14 (permalink)  
Старый 23.10.2014, 12:17
Аспирант
Отправить личное сообщение для Szorstki Посмотреть профиль Найти все сообщения от Szorstki
 
Регистрация: 15.02.2012
Сообщений: 51

Сообщение от kostyanet Посмотреть сообщение
Я в JQ слаб, беру ваш шаблон:
Вы говорите, что слабы в 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>

В ней, я так понимаю, менять ничего не надо.
Ответить с цитированием
  #15 (permalink)  
Старый 23.10.2014, 13:14
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

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

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

Функция всего 1. Она проверяет, фтыкает и кнопку оживляет. Начинаете набирать текст - красная рамка исчезает, сотрете текст - появится снова, когда оба поля будут с текстом - кнопка оживет, если стереть текст где-то - сдохнет.
Ответить с цитированием
  #16 (permalink)  
Старый 23.10.2014, 13:22
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Я так понимаю эту свою чудесную проверку вы нытырили, так что наверно вам все равно по классам там силекты или по id. Иначе делайте по классам сами. ЧТобы атрибут required не сверкал в html5 браузерах самостоятельно, его надо забить в css.
Ответить с цитированием
  #17 (permalink)  
Старый 23.10.2014, 13:26
Аспирант
Отправить личное сообщение для Szorstki Посмотреть профиль Найти все сообщения от Szorstki
 
Регистрация: 15.02.2012
Сообщений: 51

Сообщение от kostyanet Посмотреть сообщение
Без JQ, вот смотрите сам принцип

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

Последний раз редактировалось Szorstki, 23.10.2014 в 13:28.
Ответить с цитированием
  #18 (permalink)  
Старый 23.10.2014, 13:44
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Вы ж глазами видите дизаблед она или не видите? Короче, если вы скопипастить не можете, то просите написать за деньги. Копипастить надо _все_ а не только скрипт, ибо он работает по id и атрибутам, а не по сраному css.
Ответить с цитированием
  #19 (permalink)  
Старый 23.10.2014, 13:52
Аспирант
Отправить личное сообщение для Szorstki Посмотреть профиль Найти все сообщения от Szorstki
 
Регистрация: 15.02.2012
Сообщений: 51

Сообщение от kostyanet Посмотреть сообщение
Вы ж глазами видите дизаблед она или не видите? Короче, если вы скопипастить не можете, то просите написать за деньги. Копипастить надо _все_ а не только скрипт, ибо он работает по id и атрибутам, а не по сраному css.
Ну что ж я дурак что ли, естественно все скопипастил, в точности.
Да, кнопка, при незаполненных полях, disabled. Но, когда заполнишь, не отправляет.
Ответить с цитированием
  #20 (permalink)  
Старый 23.10.2014, 16:43
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

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

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Несколько функций onclick в window.onload vovastradamus Events/DOM/Window 5 14.07.2014 18:45
Потоки данных и параллельное выполнение функций Dorian_bs Общие вопросы Javascript 11 10.01.2014 18:58
Jquery, Последовательное выполнение функций разных div в одном скрипте. schnitzer Общие вопросы Javascript 3 29.09.2013 02:49
Выполнение асинхронных функций PavelX AJAX и COMET 6 04.03.2013 15:14
Паралельное выполнение 2х функций BorodinKO Общие вопросы Javascript 4 24.01.2012 14:15