1. Гость, на данный момент выплаты с форума превысили 7000 долларов! Присоединяйся к нам и начинай зарабатывать!
  2. Гость, спеши получить на новый год подарок от форума!!! Подробности тут
    Скрыть объявление
  3. Гость, примите участие в прогнозе курса Bitcoin и выиграйте коллекционную монету!
    Скрыть объявление
  4. Гость, участвуй в конкурсе прогнозов по валютной паре EUR|AUD ! Призовой фонд - 350 долларов! Участвовать
    Скрыть объявление
  5. Гость, любите смотреть фильмы? Зарабатывайте на этом в Конкурсе Киноманов!
    Скрыть объявление
  6. Гость, пользуете ОС Android на планшете или смартфоне? Возможно Вам пригодится приложение нашего форума
    Скрыть объявление
  7. Гость, рады сообщить что теперь на форуме можно заработать ещё больше продавая свою подпись. Подробнее в этой теме.
    Скрыть объявление

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

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

  1. monahyip

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

    Регистрация:
    дек 7, 2015
    Сообщения:
    562
    Симпатии:
    47
    Баллы:
    3
    Пол:
    Мужской
    Род занятий:
    делаю сайты, арбитражю
    Адрес:
    Италия
    Сайт:
    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
    Сообщения:
    1,716
    Симпатии:
    103
    Баллы:
    17
    Пол:
    Мужской
    В третьем случае можно еще подсветить инпут, например красным цветом.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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