23.10.2014, 10:31
|
Аспирант
|
|
Регистрация: 15.02.2012
Сообщений: 51
|
|
Сообщение от BETEPAH
|
Перехватывайте submit формы, как писал "комментатор выше".
|
Ну, в целом понятно.
Но здесь, получается, надо все переписывать заново. а я в этом не понимаю. Поэтому и хотел обойтись малой кровью.
Последний раз редактировалось Szorstki, 23.10.2014 в 10:49.
|
|
23.10.2014, 11:29
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
Сообщение от Szorstki
|
У нее просто класс "disabled", а не атрибут.
|
То есть череж ж сделано.
Через голову делается так: кнопке назначается атрибут disabled, а в css этот квази силектор получает оформление.
Затем функция валидации запускается по желаемым событиям, например onchange и oninput. Именно последний дает фишку что как только последний правильный символ введен - кнопочка оживает.
Однако по oninput сообщение об ошибке подавляется, иначе ж задолбает после каждого нажатия. А мессага вылезает когда юзер запустил change и допустил ошибку.
По onchange кнопка тоже может ожить, но кто ж будет нажимать мертвую кнопку - не станешь же писать нажмите мертвую кнопку, она оживет.
Поскольку у вас проверяется только на пусто и никаких-таких мессаг нет вообще, то перепишите нормально и не парьтесь, или попросите помочь. На пусто проверить рекуиред по oninput без всякого онченчж можно хоть 100500 полей (народ все равно с такой скоростью не набирает, это боль).
|
|
23.10.2014, 11:52
|
Профессор
|
|
Регистрация: 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, косяки в коде возможны.
|
|
23.10.2014, 12:17
|
Аспирант
|
|
Регистрация: 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>
В ней, я так понимаю, менять ничего не надо.
|
|
23.10.2014, 13:14
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
Балин, там JQ как-то не приросла, в песочнице, не знаю как подключить. Без JQ, вот смотрите сам принцип
http://learn.javascript.ru/play/cJPZvb
Функция всего 1. Она проверяет, фтыкает и кнопку оживляет. Начинаете набирать текст - красная рамка исчезает, сотрете текст - появится снова, когда оба поля будут с текстом - кнопка оживет, если стереть текст где-то - сдохнет.
|
|
23.10.2014, 13:22
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
Я так понимаю эту свою чудесную проверку вы нытырили, так что наверно вам все равно по классам там силекты или по id. Иначе делайте по классам сами. ЧТобы атрибут required не сверкал в html5 браузерах самостоятельно, его надо забить в css.
|
|
23.10.2014, 13:26
|
Аспирант
|
|
Регистрация: 15.02.2012
Сообщений: 51
|
|
Почему-то не работает: http://novi.co/test/bionica/ Если при нажатии на кнопку, при пустых полях, всплывает окошко об успешной отправке, значит кнопка не disabled. Иначе вообще ничего не происходило бы
У вас в примере все работает, а у меня почему-то нет.
Последний раз редактировалось Szorstki, 23.10.2014 в 13:28.
|
|
23.10.2014, 13:44
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
Вы ж глазами видите дизаблед она или не видите? Короче, если вы скопипастить не можете, то просите написать за деньги. Копипастить надо _все_ а не только скрипт, ибо он работает по id и атрибутам, а не по сраному css.
|
|
23.10.2014, 13:52
|
Аспирант
|
|
Регистрация: 15.02.2012
Сообщений: 51
|
|
Сообщение от kostyanet
|
Вы ж глазами видите дизаблед она или не видите? Короче, если вы скопипастить не можете, то просите написать за деньги. Копипастить надо _все_ а не только скрипт, ибо он работает по id и атрибутам, а не по сраному css.
|
Ну что ж я дурак что ли, естественно все скопипастил, в точности.
Да, кнопка, при незаполненных полях, disabled. Но, когда заполнишь, не отправляет.
|
|
23.10.2014, 16:43
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
Сообщение от Szorstki
|
Ну что ж я дурак что ли
|
Я уже начал сомневаться. Вы action вернули на место? То есть скопипастить дело тоже творческое, понимаете? Я выкосил action формы на всякий случай, ну мало ли там обматерят. Верните если не заметили что его там нет. И главное - кнопка-то активная становится или как?
Дело в том что я ж не могу вам прямо все правильно написать, или давайте ТЗ.
|
|
|
|