Уважаемые посетители сайта, задающие вопросы вроде "А как прикрутить вашу корзину к сайту?" и т.п. Я не делаю готовых решений, я описываю логику реализации, для каждого отдельного сайта нужно будет дописывать те или иные вещи в любом случае, поэтому если вам очень нужно что-либо прикрутить или приделать, я оказываю платные и бесплатные услуги по консультированию и доработке сайтов. Пишите в форму обратной связи вверху страницы, отвечу всем.

Неактивная кнопка submit (атрибут DISABLED)

Иногда на сайте необходимо сделать форму, в которую пользователь вводит какие-либо данные. Полей в форме может быть сколько угодно, однако всегда есть поля обязательные для заполнения. Как же проверить, заполнил пользователь нужное поле или нет. Есть два пути:

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

Проверка методами JavaScript – все гораздо проще (в плане работы самой формы). Задаем каждому полю событие onchange или любое другое реагирующее на действие пользователя (ну не onmouseover конечно, хотя наверное можно сделать даже забавно…), после которого написанная нами функция будет проверять, заполнены ли обязательные поля и разрешать или запрещать кнопку submit.

Первый вариант относится больше к разделу PHP, поэтому пока рассматриваться не будет. Рассмотрим более подробно второй. Первое что нам необходимо – сама форма:

Как видите, у кнопки Submit имеется атрибут disabled в значении disabled. Также у каждого поля формы есть событие onchange, при котором вызывается функция EnableButton(). Что же из себя представляет данная функция? Допустим, полями, обязательными для заполнения, являются field1 и field3, тогда функция EnableButton() будет выглядеть так:

function EnableButton()
{
with (document.forms.form1)
{
if (field1.value!=""&&field2.value!=’’)
{
disable_button.disabled=false ;
}
else
{
disable_button.disabled=true ;
}
}
}

К сожалению, я не нашел в JavaScript аналога PHP функции empty(), поэтому значения полей приходится сравнивать с пустой строкой. Еще на что стоит обратить внимание – оператор with (document.forms.form1). Для тех кто не знаком с JavaScript – выражение в скобках оператора with будет добавляться ко всем объектам, что позволяет значительно сократить запись функции. Без with EnableButton() выглядела бы следующим образом:

function EnableButton()
{
if (document.forms.form1.field1.value!=""&& document.forms.form1.field2.value!=’’)
{
false ;
}
else
{
document.forms.form1.disable_button.disabled=true ;
}
}

Согласитесь – довольно громоздко.
В продолжении стоить отметить, что атрибут disabled можно использовать для любого элемента формы. Пример – заполнение информации о фирме – юридический и почтовый адрес. Два поля для двух адресов, однако можно добавить флажок checkbox (- совпадает с юридическим), отметив который, пользователь укажет что поле почтовый адрес обрабатывать не надо и можно добавить ему атрибут disabled.

Темой сегодняшней статьи будет форма заполнения, а именно ее, небольшая валидация. Если сказать точнее, это не совсем валидация, потому как проверка на правильность ввода производится не будет. Данный способ, делает неактивной кнопку отправки, пока нужные поля в форме не будут заполнены.

Блокировка кнопки отправки, пока поля не заполнены, достигается с помощью jQuery . Поможет нам небольшой скрипт, который и будет осуществлять задуманное. Давайте сделаем такую форму с неактивной кнопкой.

Подключение библиотеки jQuery

Первым шагом будет подключение в шапку перед закрывающимся head или в подвал перед закрывающимсяbody библиотеки jQuery .

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

Скрипт блокировки кнопки отправки

Function checkParams() { var name = $("#name").val(); var email = $("#email").val(); var phone = $("#phone").val(); if(name.length != 0 && email.length != 0 && phone.length != 0) { $("#submit").removeAttr("disabled"); } else { $("#submit").attr("disabled", "disabled"); } }

В строках 2,3,4 задаем наши поля, а именно их ID в будущей форме и присваиваем им имена для работы скрипта. Как говорил их три, так что по нужде можно лишние убрать или добавить нужные.

В 6 строке задаются параметры по количеству символов в полях. В данном коде указан параметр != 0 , то есть, если в поле ничего нет оно не разблокирует кнопку, если вбить хоть один символ, это поле считается заполненным. И как видно у нас указано три поля и каждое имеет одинаковый параметр.

Если Вам нужно задать другое минимальное количество символов, то нужно немного изменить код. Если Вы просто замените "0" на нужную цифру, то это ничего не даст. Чтобы все работало нужно заменить:

!= 0 на >=7

То есть мы задаем параметр разрешить отправку, если в поле больше равно 7 символов. То есть кнопка не активируется пока в поле, где указанный данный параметр не будет 7 или больше символов. Давайте зададим следующие параметры. Для имени 2 знака, для почты - 5 и номер 7. Готовая 6 строка скрипта выглядит так:

If(name.length >=2 && email.length >=5 && phone.length >=7) {

Для тех кого интересует вопрос - А как указать максимальное количество символов? . Ответ: в HTML коде, в поле input пропишите атрибут

Maxlength="15"

который устанавливает ограничение в 15 символов. Просто укажите свое число.

В 7 и 9 строке указан ID нашей будущей кнопки - "ОТПРАВИТЬ" из формы, которая в случаи выполнения условий будет разблокирована. В данном случаи это - #submit .

HTML код

Теперь вставим простую форму с тремя полями. Наша форма будет отправлять имя, почту и телефон. Вы же можете использовать свою форму.

Чтобы все сработало, во-первых - к нужным полям нужно добавить событие -

Onkeyup="checkParams()"

которое запускает работу нашего скрипта.

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

В-третьих у полей input должен быть ID, который так же указывается и в скрипте, как я и говорил выше.

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

Данный метод помог мне при создании форм, которые используют ajax и отправляют письмо без перезагрузки страницы в независимости заполнены ли поля. То есть если человек начнет просто нажимать на кнопку, то пойдут пустые письма, а так кнопка блокируется и не дает этого сделать.

На этом все, спасибо за внимание. 🙂

) ставился вопрос о том, что было бы хорошо кнопкам формы, отправляемой на сервер, ставить свойство disabled = "disabled" .

Однако, до сих пор так и не разобрались, зачем это нужно и как все-таки это делать. Казалось бы, что может быть проще и о чем здесь вообще можно разговаривать, ан нет - на поверку все оказалось не так тривиально. Сразу замечу, что нижеследующие рассуждения применимы к обеим типам форм: как отправляемым через обычный SUBMIT, так и с помощью AJAX.

Зачем нужно делать кнопки неактивными

Чтобы пользователю стало очевидным, что он уже нажал на кнопку, и что форма отправляется

Чтобы сервер не загружался лишними запросами, и чтобы уменьшить вероятность какой-либо ошибки

Понятно, что можно предотвратить лишние нажатия при помощи навешивания специальной визуализации, говорящей, что запрос принят и форма отправляется (простейший пример - показать какой-нибудь анимированный gif). Однако, кнопки-то при этом все равно останутся кликабельными, и самые нетерпеливые пользователи не применут воспользоваться такой возможностью. При этом, на эти дополнительные нажатия форма уже никак не сможет отреагировать (анимированный gif уже крутится), и фрустрация пользователя только увеличится.

Понятно также, что лишние запросы можно предотвратить, повесив на форму какой-нибудь class="form_is_loading" , и при всяком сабмите проверять на наличие этого класса. Но зачем делать эти проверки, когда можно обойтись без них, просто сделав кнопку неактивной?

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

Почему недостаточно просто делать нажатую кнопку неактивной:

Submit формы может произойти и по нажатию на Enter. Поэтому обработку кнопок надо вешать на событие onsubmit самой формы. К тому же, у формы может быть несколько кнопок, и было бы логичным делать их все неактивными, а не только ту кнопку, которую нажали.

Если после сабмита формы вновь вернуться на страницу с формой (по кнопке «Назад» в браузере), то сработает кеширование: мы столкнемся с неактивными кнопками и не сможем отправить форму еще раз - без принудительной перезагрузки страницы с потерей всех заполненных ранее полей (Возврат к поисковой форме со страницы результатов поиска тут живейший пример).

Если у формы несколько кнопок (например, «Опубликовать» и «Отмена»), то мы не сможем передать серверу, какая именно кнопка была нажата: неактивная кнопка не передает свое имя и значение - даже если мы делаем ее неактивной по событию onsubmit

Итак, сценарий создания неактивных кнопок

Вкратце сценарий таков.

Кнопки делаем неактивными по событию onsubmit формы

Кнопки возвращаем в активное состояние до ухода со страницы по событию window.onunload

Каждая кнопка формы по событию onclick должна создавать одноименное hidden поле, через которое передаст свое значение серверу

А далее следует более развернутый сценарий с макетом кода.

//// html файл ////////////////////////////////////////////////////////////////////// formUploader.prepareForm(document.getElementById("the_form")); //// js файл //////////////////////////////////////////////////////////////////////// formUploader = { prepareForm: function(form){ // Каждая значимая кнопка формы при клике должна создать одноименное hidden поле, // чтобы на сервер передалась информация о том, какая кнопка была кликнута var allFormFields = form.getElementsByTagName("input"); for (var i=0; i