Получить бесплатную консультацию
Оставьте свои контакты, и с Вами
свяжутся наши специалисты
Заявка успешно отправлена!
С вами свяжется наш консультант :)
Произошла какая-то ошибка, пожалуйста, обновите страницу и попробуйте снова.
Новичок
6 уроков
(1 час 30 минут)
Курс
Bootstrap
Курс по практическому применению самых главных вещей в Bootstrap 3 - всё, что нужно знать, для запуска боевых проектов.

#5 — Валидация форм своими руками (ajax + сервер).

Заключительный урок по bootstrap формам: пишем ajax и серверную сторону.
Пишем ajax, защищаем форму от повторных кликов, смотрим валидацию на сервере и логику отправки письма mail() php.


javascript код:

php код:

Делись:

Оставь комментарий!

35 thoughts on “#5 — Валидация форм своими руками (ajax + сервер).

  1. simandr:

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

    1. kovaldn:

      Привет! Какой у тебя хостинг? Нужно логи посмотреть.

      1. simandr:

        Благодарю за оперативные ответы. Проблема решена настройкой email на хостинге. На том хостинге, где тестировалось косяковый аккаунт был. Переставил на другой создал email и заработало! урок Супер!

    2. Василий Вербилки:

      А почту точно свою указали? ))) вдруг на автомате по уроку написали )))

  2. Василий Вербилки:

    Все отлично в уроках! Но есть одно НО, на сервере, в частности при использовании Joomla! 3.3.0 не работает. На денвере без проблем, а вот на хостинге не желает ни разу …. В чем может быть причина?! Дополню еще. Для интереса установил на хостинг папку с файлами — все работает и тултипы и подсветка полей и почта приходит! А вот на сайте с Joomla пишет следующее $ is not defined в 10 строке в common.js … где копать уже не знаю …Может вы подскажете?!

    1. kovaldn:

      Это известная особенность Joomla. Самое простое, что ты можешь сделать — $ везде заменить на jQuery. Или же «хакать» саму джумлу — вырезать из неё всякие гадости вроде mootools и пр. — всё, что вызывает конфликт с $.

      1. Василий Вербилки:

        Благодарю за ответ! Вот прям три минуты назад все сделал и все заработало! ))) А отключить в Joomla mootols можно либо плагином либо прописывать хак. Я воспользовался кодом, а если кому интересно будет, то могу поделиться плагином Joomla Options, вернее ссылкой на него через личку! Тут некорректно будет выкладывать ссылку на вашего конкурента по тематике … Еще раз благодарю за ваш ответ!!!

        1. kovaldn:

          Добавляйся в скайп skype_kdn

  3. Василий Вербилки:

    Вопрос вдруг появился. В частности, в outlook 2007 заголовок письма с сайта выглядит вот так Автоколесо [mail@mail.ru]/А когда из «From: «.$name.» rn» убираешь .$name. все круто. естественно и понятно, что кракозябр и нет потому что удалено то, что в этих самых кракозябрах и прячется. Со всех других форм письма четко приходят, с этой формы не хотят почему-то. кстати, на почту яндекса или mail все приходит ровно без абрыкадабры . И на ю-тубе еще есть один комментарий ..

  4. Василий Вербилки:

    Я ни в коем случае не собираюсь флудить, но есть еще один вопрос. После заполнения и отправки формы, ссылка выглядит вот так: http://www.mysite.ru/form-zakaza?name=%D0%90%D0%B2%D1%82%D0%BE%D0%BA%D0%BE%D0%BB%D0%B5%D1%81%D0%BE&email=mypochta%40yandex.ru&phone=0000000000&dopcontacts=mypochta&message=%D0%A4%D0%BE%D1%80%D0%BC%D0%B0+%D0%B7%D0%B0%D0%BA%D0%B0%D0%B7%D0%B0+%D0%BD%D0%B0+%D1%81%D0%B0%D0%B9%D1%82 Разве не должно быть вот так: http://www.mysite.ru/form-zakaza?! Если да, то поясните, пожалуйста, как это сделать?

    1. kovaldn:

      У вас не срабатывает ajax. Ищите ошибку в своём коде js.

  5. Василий Вербилки:

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

    1. kovaldn:

      Василий, извиняюсь за столь не быстрый ответ — был в отпуске :) Чтобы в аутлуке и бате всё работало хорошо, нужно добавить этот код:
      $name = ‘=?UTF-8?B?’.base64_encode($name).’?=’;
      это относится к любым заголовкам. Если в From и To тоже есть русские буквы, то их тоже нужно кодировать. В Content-Type: задаётся только кодировка тела, которое может быть отослано в любой кодировке.

  6. Проверка почты не проходит, запросто можно отправить текст, вместо цифер.

  7. Maxim Cojocaru:

    Привет всем , у мена есть маленькая проблема , после нажатия на кнопку Отправить , выдает сообщение ОК , вместо : Спасибо за заявку! Мы вам перезвоним, * я так понимаю код не доходит до нужной строки.

    .done(function(msg) {

    if(msg === «OK»){

    var result = «Спасибо за заявку! Мы вам перезвоним!»

    form.html(result);

    }else{

    form.html(msg);

    }

    })

    Заявка приходит , но текст не тот .Спасибо, очень жду вашей помощи !

  8. Валера Львов:

    Привет! Из-за чего письма могут не приходить! Я использую codeignite, скрипты php и js в корне сайта! Указываю свою почту, а в ответ ничего нет! ( Как быть! Сайт находиться на хостинге!)

  9. cx717:

    Подскажите как подключить common.js к html документу.

    1. cx717:

      p.s. если в тэг поместить строку:

      то скрипт common.js не cрабатывает.

      1. cx717:

        Понял) подключаьт надо не в тэге , а в тэге , после

        тогда все работает

  10. EvgeniyAL:

    Спасибо! Очень полезно!

    Подскажите пожалуйста только один момент, как сделать так что бы при нахождении на одной странице нескольких форм, валидации подвергалась только одна. Задал ей id=’form-valid’, но где в скрипте это указать к сожалению не понимаю…

    Заранее спасибо!

    1. kovaldn:

      Вот пример такой универсальной функции.

      // сабмит формы

      $(‘#contact-form, #introForm, #footerForm, .modal-form’).on(‘submit’, function(event) {

      event.preventDefault();

      var thisForm = $(this);

      str = thisForm.serialize(),

      $.ajax({

      type: «POST»,

      url: «contact_process.php»,

      data: str,

      success: function(msg) {

      if(msg == ‘OK’) {

      result = ‘Спасибо за заявку! Мы свяжемся с вами в течение 15 минут.’;

      thisForm.html(result);

      $(«.msg»).html(»);

      } else {

      $(«.msg»).html(msg);

      }

      }

      });

      });

      1. EvgeniyAL:

        Спасибо большое, разобрался!

      2. Василий Вербилки:

        Я прошу прощения за глупый вопрос, но не могли бы вы более подробно описать этот момент?! В какое место в скрипте вставлять данный код?

        Благодарю за ответ!

  11. Oleg Ogilko:

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

    $.each(inputs, function(index, val) {

    var input = $(val),

    val = input.val(),

    formGroup = input.parents(‘.form-group’),

    holder = formGroup.find(‘input’).attr(«placeholder»).toLowerCase(),

    textError = ‘Введите ‘ + holder;

    Пример сайта: http://go.nikmoto.com.ua/test4

  12. Oleg Ogilko:

    Здравствуйте, подскажите пожалуйста,

    при нажатии на кнопку сразу выводиться тултип по всем полям

    а нужно чтобы поочередно он выводился ка у Вас на видео

    Код проверки:

    validateForm: function (form){

    var inputs = form.find(‘input’),

    valid = true;

    inputs.tooltip(‘destroy’);

    $.each(inputs, function(index, val) {

    var input = $(val),

    val = input.val(),

    formGroup = input.parents(‘.form-group’),

    holder = formGroup.find(‘input’).attr(«placeholder»).toLowerCase(),

    textError = ‘Введите ‘ + holder;

    Пример на сайте в футере сайта: http://go.nikmoto.com.ua/test4

  13. Oleg Ogilko:

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

    $.each(inputs, function(index, val) {

    var input = $(val),

    val = input.val(),

    formGroup = input.parents(‘.form-group’),

    holder = formGroup.find(‘input’).attr(«placeholder»).toLowerCase(),

    textError = ‘Введите ‘ + holder;

    Пример сайта: http://go.nikmoto.com.ua/test4

  14. Сергей:

    POST http://127.0.0.1:54533/project1-form/contact_process.php 404 (Not Found)jquery.min.js:4 sendjquery.min.js:4 m.extend.ajaxform.js:29 app.submitFormjquery.min.js:3 m.event.dispatchjquery.min.js:3 r.handle

  15. Юрий:

    Доброго времени! Как можно изменить оформление сообщения, которое выдается после отправки формы?

  16. Добрый день у меня такая ситуация
    выдает ошибку
    ReferenceError: jQuery is not defined
    это если я исправляю $ на Jquery
    если не исправляю $ на Jquery тоже ошибка
    setUpListeners:function(){
    $(‘form’).on(‘submit’,app.submitForm);
    },

    версия моего jquery 1.11.2 заранее благодарю

  17. Oleg:

    Помогите решить проблему POST http://(сайт)/contact_process.php 404 (Not Found)

  18. Владимир:

    Здравствуйте. Подскажите, пожалуйста, как можно сделать валидацию формы если кроме полей input необходимо проверить и поле textarea и captcha?

  19. triamera:

    Сразу говорю, я новичок в этом, поэтому мой вопрос может показаться глупым. Сделал всё как в уроке, на Denwere все работает. Но у меня возник вопрос, а письмо не должно прийти мне на почту если я тестирую все на локалке?

  20. bambuk:

    Спасибо за мини курс. Заказ вроде научился отправлять. Подскажите пожалуйста, а как отправить данные формы на сервер? Скрипт подписки на рассылку. Спасибо.

  21. kyrut:

    Добрый день спасибо за уроки. Все написал а не работает подскажите где искать ошибку
    выдал вот что
    http://localhost:8383/php/form.php net::ERR_EMPTY_RESPONSE
    send @ jquery.js:9659
    ajax @ jquery.js:9210
    submitForm @ main.js:26
    dispatch @ jquery.js:4665
    elemData.handle @ jquery.js:4333

Добавить комментарий

Рекомендуемые курсы