1. Гость, теперь Вы можете заходить на форум с гаджетов работающих на ОС Android, версии 4.4 и выше, через наше приложение. Приложение доступно по .
    Скрыть объявление
  2. Гость, на данный момент выплаты с форума превысили 10000 долларов! Присоединяйся к нам и начинай зарабатывать!
  3. Гость, любите смотреть фильмы? Зарабатывайте на этом в Конкурсе Киноманов!
    Скрыть объявление
  4. Гость, рады сообщить что теперь на форуме можно заработать ещё больше продавая свою подпись. Подробнее в этой теме.
    Скрыть объявление

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

Тема в разделе "Движки, шаблоны, стили, модули, хаки", создана пользователем monahyip, июн 4, 2016.

  1. monahyip

    monahyip Старожила Стандартная ставка оплаты

    Регистрация:
    дек 7, 2015
    Сообщения:
    643
    Симпатии:
    65
    Баллы:
    6
    Пол:
    Мужской
    Род занятий:
    делаю сайты, арбитражю
    Адрес:
    Италия
    Сайт:
    forma.png

    Очень часто возникает ситуация, когда нужно проверить форму 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 
    0form.elements.lengthi++)
      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>

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

    form2.png

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

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

    monahyip, специально для форума FinForum.Net
     
    Владимир Казаков, Arkad и Mamikon нравится это.
  2. Mamikon

    Mamikon Матёрый юзер Стандартная ставка оплаты

    Регистрация:
    окт 23, 2015
    Сообщения:
    2,413
    Симпатии:
    298
    Баллы:
    30
    Пол:
    Мужской
    Сайт:
    В третьем случае можно еще подсветить инпут, например красным цветом.

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

    monahyip Старожила Стандартная ставка оплаты

    Регистрация:
    дек 7, 2015
    Сообщения:
    643
    Симпатии:
    65
    Баллы:
    6
    Пол:
    Мужской
    Род занятий:
    делаю сайты, арбитражю
    Адрес:
    Италия
    Сайт:
    Можно много чего добавить :), в целом подсветка часто помогает даже на моменте заполнения формы.
     
  4. surfer

    surfer Пользователь Стандартная ставка оплаты

    Регистрация:
    июл 10, 2016
    Сообщения:
    97
    Симпатии:
    5
    Баллы:
    0
    Пол:
    Мужской
    Сайт:
    но js можно обойти, мне кажется проверка формы на стороне клиента не самое удачное решение
     
  5. monahyip

    monahyip Старожила Стандартная ставка оплаты

    Регистрация:
    дек 7, 2015
    Сообщения:
    643
    Симпатии:
    65
    Баллы:
    6
    Пол:
    Мужской
    Род занятий:
    делаю сайты, арбитражю
    Адрес:
    Италия
    Сайт:
    а мне кажется вначале заполнение формы - самое удачное решение. А уже потом остальная проверка на сервере, чтобы не нагружать запросами.
     
  6. surfer

    surfer Пользователь Стандартная ставка оплаты

    Регистрация:
    июл 10, 2016
    Сообщения:
    97
    Симпатии:
    5
    Баллы:
    0
    Пол:
    Мужской
    Сайт:
    все что делается на стороне клиента обходится на раз-два
     
  7. monahyip

    monahyip Старожила Стандартная ставка оплаты

    Регистрация:
    дек 7, 2015
    Сообщения:
    643
    Симпатии:
    65
    Баллы:
    6
    Пол:
    Мужской
    Род занятий:
    делаю сайты, арбитражю
    Адрес:
    Италия
    Сайт:
    Так мы проверяем не логин пароль или другие "секретные данные", а сам факт заполнения.
     
  8. surfer

    surfer Пользователь Стандартная ставка оплаты

    Регистрация:
    июл 10, 2016
    Сообщения:
    97
    Симпатии:
    5
    Баллы:
    0
    Пол:
    Мужской
    Сайт:
    без проблем, делай как хочешь, добро пожаловать в ряды быдлокодеров!!!
     
  9. monahyip

    monahyip Старожила Стандартная ставка оплаты

    Регистрация:
    дек 7, 2015
    Сообщения:
    643
    Симпатии:
    65
    Баллы:
    6
    Пол:
    Мужской
    Род занятий:
    делаю сайты, арбитражю
    Адрес:
    Италия
    Сайт:
    Мы наверное о разном говорим. Есть куча форм, есть простая форма заказа, которая в примере, есть формы с данными клиента.
    и о быдлокодере здесь вообще не в тему.