Проверка форм html на пустые строки до отправки submit

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

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

А два варианта, которые выполняются непосредственно на странице заполнения формы напишу. Они позволят не отправлять данные с формы после нажатия кнопки submit (или ентера), если поля пустые.

Вариант первый - чисто на html.

Все что нужно, это добавить required в поле, которое нужно сделать обязательным.
Например, сделаем обязательно поле Телефон на странице заказа (подойдет для многих лендингов по товарке или интернет-магазина)

PHP:

<form action="zakazfinforumnet.php" method="post">
                         <input type="text" name="name"  placeholder="Введите Ваше имя"/>
                        <input type="text" name="phone" required  placeholder="Введите ваш телефон"/>
                        <button type="submit" ><span>Отправить</span></button>
                    </form>

В таком случае вам просто нельзя будет перейти дальше. Будет выдавать, что нужно ввести данные в поле телефон. Но гораздо привлекательней (особенно для конечного пользователя) обрабатывать формы javascript'ом.

Javascript проверка форм html с уведомлением

На яваскрипте можно расширить уведомление. Можно проверять любые формы, и зависимо от этого выводить уведомление. Можно вывести зависимо от конкретного поля конкретное сообщение.
Вот пример простого уведомление когда не заполнены поля формы.

PHP:

     <script>
      function checkformufinforum(form)
{
  for (var i = 0; i < form.elements.length; i++)
  if (form.elements[i].value == '')
{
  alert ('Все поля должны быть заполнены!');
  return false;
}}     </script>
<form action="zakazfinforumnet.php" onsubmit="return checkformufinforum(this)"  method="post">
                           
                        <input type="text" name="name"  placeholder="Введите Ваше имя"/>
                        <input type="text" name="phone" placeholder="Введите Ваш телефон"/>
                        <button type="submit" ><span>Заказать обратный звонок</span></button>
                    </form>


А вот таким кодом можно указать какое конкретное поле нужно заполнить пользователю.

PHP:

 <script>
      function checkForm(form)
{    
var txt = document.getElementById('name').value; //создаем переменную по данным Имя пользователя
var phone=document.getElementById('telephone').value; //создаем переменную по номеру телефона пользователя
    if(txt == '') //проверяем не пустое ли поле Имя
    {        
alert('Вы забыли ввести имя.'); //и выводим сообщение если пустое поле Имя
        return false;
    }     
if(phone== '')    { //проверяем пустое ли поле телефон
        alert('Вы забыли ввести телефон.'); // и если таки да, оно пустое, то выводим сообщение об этом
        return false;
    }
      return true;}      </script>

<form action="zakazfinforumnet.php" onsubmit="return checkformufinforum(this)"  method="post">
                           
                        <input type="text" name="name" id='name' placeholder="Введите имя"/>
                        <input type="text" name="phone" id='telephone' placeholder="Введите телефон"/>
                        <button type="submit" ><span>Заказать обратный звонок</span></button>
                    </form>



*(в коде все, что после '//' можно удалить при копировании кода на сайт. это просто комментарии, чтобы легче сориентироваться )
Вот форма для ввода имени и телефона. Заполняем имя и жмем Отправить.



И нам выдает такое окошечко:


В общем, делать можно много чего интересного.

monahyip, специально для форума FinForum.Net

 

В третьем случае можно еще подсветить инпут, например красным цветом.

var txt = document.getElementById('name').style.borderColor = "red";

 

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

 

но js можно обойти, мне кажется проверка формы на стороне клиента не самое удачное решение

 

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

 

все что делается на стороне клиента обходится на раз-два

 

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

 

без проблем, делай как хочешь, добро пожаловать в ряды быдлокодеров!!!

 

Мы наверное о разном говорим. Есть куча форм, есть простая форма заказа, которая в примере, есть формы с данными клиента.
и о быдлокодере здесь вообще не в тему.