Цитата:
Но здесь, получается, надо все переписывать заново. а я в этом не понимаю. Поэтому и хотел обойтись малой кровью. |
Цитата:
Через голову делается так: кнопке назначается атрибут 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, косяки в коде возможны. |
Цитата:
Если не сложно, можно целиком? С учетом моего кода: (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.
|
Цитата:
У вас в примере все работает, а у меня почему-то нет. |
Вы ж глазами видите дизаблед она или не видите? Короче, если вы скопипастить не можете, то просите написать за деньги. Копипастить надо _все_ а не только скрипт, ибо он работает по id и атрибутам, а не по сраному css.
|
Цитата:
Да, кнопка, при незаполненных полях, disabled. Но, когда заполнишь, не отправляет. |
Цитата:
Дело в том что я ж не могу вам прямо все правильно написать, или давайте ТЗ. |
Часовой пояс GMT +3, время: 21:56. |