Как проверить переменную на пустоту в ajax форме?

Question

[Secret73]

Всем привет. Использую следующую форму для отправки сообщений через ajax. Форма взята из свободного доступа. Подскажите пожалуйста как мне сделать проверку переменной msg на пустоту?

$('.email-form').submit(function (e) {
    e.preventDefault();
    var msg = $(this).serialize();
    $.ajax({
      type: 'POST',
      url: 'send.php',
      data: msg,
      success: function(data) {
        $('.results').html(data);
        window.setTimeout(function () {
           $('.results').hide();
           $('.modal').modal('hide');
        }, 5000);
      },
      error:  function(xhr, str){
        alert('Возникла ошибка: ' + xhr.responseCode);
      }
    });
  });

Answer 1

[Виктор П.]

<...>
var msg = $(this).serialize();
if(!msg.name || !msg.email) return;
$.ajax({
<...>

upd: проблема в serialize(), тут нужно использовать
var msg = $(this).serializeArray();

Comments

[Secret73]

После этого форма перестает работать вообще ((

[Виктор П.]

Булеву алгебру же не нужно пояснять? )
Какие поля используются на форме?
Тут я написал, если поле name не заполнено или поле email не заполнено. Если у тебя другие идентификаторы на полях, то эти точно заполнены не будут и форма отправляться не будет )
напиши так:

var msg = $(this).serialize();
debugger;
if(!msg.name || !msg.email) return;

в хроме открой панель разработчика нажав f12 и запусти страницу. Посмотри, какие переменные у тебя внутри msg, просто наведи мышку на эту переменную. Затем пропиши интересующие тебя условия перед return;

[Secret73]

Виктор П., Дак такие же ))Я вот выше приводил ))
var msg = $(this).serialize();
console.log(msg); - содержит name=%D0%92%D0%B0%D1%81%D1%8F&phone=%2B7%20(222)%20222-22-22&email=test%40mail.ru&ch=%D0%9F%D0%B5%D1%80%D0%B5%D0%B7%D0%B2%D0%BE%D0%BD%D0

[Виктор П.]

А, понял ) ты взял не тот метод, используй:
var msg = $(this).serializeArray();

[Виктор П.]

твой метод сериализует переменные в строку для отправки методом get. А у тебя идёт отправка методом post, тебе нужен обычный объект для отправки, который получается методом serializeArray()

[Secret73]

Виктор П., Понял, спасибо большое, попробую Ваш метод )

[Secret73]

Виктор П., Безуспешно ,форма перестает работать...

[Виктор П.]

Отладчик-то что говорит? Что лежит в msg?
var msg = $(this).serializeArray();
console.log(msg);
console.log(msg.name);
console.log(msg.email);

[Secret73]

Виктор П., joxi.ru/brRKQb5UJJ6ORm Видимо нужно сделать что то в роде msg[0]

[Виктор П.]

Окей, оказалось посложнее, похоже из коробки нужного сериализатора нет
Добавьте функцию

//serialize data function
function objectifyForm(formArray) {

  var returnArray = {};
  for (var i = 0; i < formArray.length; i++){
    returnArray[formArray[i]['name']] = formArray[i]['value'];
  }
  return returnArray;
}

Затем, модифицируйте код:

var fieldArr = $(this).serializeArray();
var msg = objectifyForm(fieldArr);
if(!msg.name || !msg.email) return;

[Secret73]

Виктор П., Данный метод сработал, спасибо Вам большое. Получился вот такой код в итоге. Жаль что его ни как уменьшить нельзя )

/* ajax form */
  function objectifyForm(formArray) {
    var returnArray = {};
    for (var i = 0; i < formArray.length; i++) {
      returnArray[formArray[i]['name']] = formArray[i]['value'];
    }
    return returnArray;
  }
  $('.email-form').submit(function (e) {
    e.preventDefault();
    var fieldArr = $(this).serializeArray();
    var msg = objectifyForm(fieldArr);
    if (!msg.name || !msg.email) {
      $('.form-control').addClass('error-input');
      window.setTimeout(function () {
        $('.form-control').removeClass('error-input');
      }, 5000);
      return;
    } else {
      $.ajax({
        type: 'POST',
        url: 'send.php',
        data: msg,
        success: function (data) {
          $('.results').html(data);
          window.setTimeout(function () {
            $('.results').hide();
            $('.modal').modal('hide');
          }, 5000);
        },
        error: function (xhr, str) {
          alert('Возникла ошибка: ' + xhr.responseCode);
        }
      });
    }
  });

Answer 2

[leni_m]

вообще можно сделать так:

<input id="name" name="name" />
<input id="email" name="email" />

$('.email-form').submit(function (e) {
    if ($("#name").val().length !== 0 && $("#email").val().length !== 0) {
    e.preventDefault();
    var msg = $(this).serialize();
    $.ajax({
      type: 'POST',
      url: 'send.php',
      data: msg,
      success: function(data) {
        $('.results').html(data);
        window.setTimeout(function () {
           $('.results').hide();
           $('.modal').modal('hide');
        }, 5000);
      },
      error:  function(xhr, str){
        alert('Возникла ошибка: ' + xhr.responseCode);
      }
    });
}
  });

Answer 3

[Web Dentist]

if(msg)

Comments

[Secret73]

Не помогает или может я использую не правильно?

[leni_m]

там же в msg полюбэ имена инпутов есть, и он всегда true

[Secret73]

leni_m,
var msg = $(this).serialize();
console.log(msg); - содержит name=%D0%92%D0%B0%D1%81%D1%8F&phone=%2B7%20(222)%20222-22-22&email=test%40mail.ru&ch=%D0%9F%D0%B5%D1%80%D0%B5%D0%B7%D0%B2%D0%BE%D0%BD%D0%B8%D1%82%D1%8C%20%D0%B1%D1%8B%D1%81%D1%82%D1%80%D0%B5%D0%B5

[Web Dentist]

Secret73,if(msg.replace(/^\s+|\s+$/g, '') != '')

[Максим Тимофеев]

Secret73, ну так она не пустая, там

name=Вася&phone=[phone]&email=[e-mail]&ch=Перезвонить быстрее

надо перебрать msg через each проверяя каждый элемент на пустоту

[Secret73]

Максим Тимофеев, Это я показал, что она содержит. А вот как мне сделать, что бы форма не отправлялась если name emal пустые?

[Secret73]

Web Dentist, По разному пробывал вставить Ваш вариант и ни один раз не получилось сделать это правильно ((

[Максим Тимофеев]

Secret73,

А вот как мне сделать, что бы форма не отправлялась если name emal пустые?

if(msg.name == ''){
alert('ахтунг');
}

[Secret73]

Максим Тимофеев, Я пробывал так, я может не туда подставляю?

$('.email-form').submit(function (e) {
    e.preventDefault();
    var msg = $(this).serialize();
    if(msg.name == ''){
      alert('Поля пустые');
    } else {
	    $.ajax({
	      type: 'POST',
	      url: 'send.php',
	      data: msg,
	      success: function(data) {
	        $('.results').html(data);
	        window.setTimeout(function () {
	           $('.results').hide();
	           $('.modal').modal('hide');
	        }, 5000);
	      },
	      error:  function(xhr, str){
	        alert('Возникла ошибка: ' + xhr.responseCode);
	      }
	    });
    }
  });

[Максим Тимофеев]

Secret73,
должно работать, значит у Вас там не пусто, проверьте:

console.log(typeof msg.name);
console.log(msg.name);

[Secret73]

Максим Тимофеев, undefined

[Максим Тимофеев]

Secret73, ну вот, осталось дополнить Ваше условие

if(type of msg.name == 'undefined' or msg.name == '' ){
alert('ахтунг');
}

можно функцию юзать

function isEmpty(str) {
    return (!str || 0 === str.length);
}

if(isEmpty(msg.name)){
alert('ахтунг');
}

я бы еще проверил на пробелы и т.д. В случае с name наверное имеет смысл иметь минимальный размер строки.

[Secret73]

Максим Тимофеев, Спасибо))

[Secret73]

Максим Тимофеев, Не работает данный метод и вариант выше тоже не срабатывает (

[Максим Тимофеев]

Secret73, хотите решения, размещайте код в песочнице:
https://codepen.io/
https://jsfiddle.net/
Я не провидец и не могу догадываться

[Secret73]

Максим Тимофеев, https://jsfiddle.net/bxuh74ao/ Вот закинул, а PHP обработку куда?)

[Максим Тимофеев]

Secret73, у вас проблема с js, зачем php?

Не работает данный метод и вариант выше тоже не срабатывает

что именно не работает? Я не вижу в песочнице проверку

[Secret73]

Максим Тимофеев, Добавил https://jsfiddle.net/bxuh74ao/2/ Получается что условие игнорируется и выполняется отправка

[Максим Тимофеев]

Secret73, у Вас js вообще не работает https://jsfiddle.net/bxuh74ao/3/, сплошные ошибки в консоле. Отправка идет обычным синхронным запросом, что нормально для формы.

[Secret73]

Максим Тимофеев, Ну так Вы же мне привели выше эту проверку )

[Максим Тимофеев]

Secret73, я же не проверяю код, сложно открыть консоль и прочитать ошибку? Надо вычитывать все и проверять, прежде чем иметь честь дать Вам совет?
не type of а typeof Пробел влез. Мне за Вас все сделать? Ну так платите тогда. А раз бесплатно Вам советы дают - говорите спасибо и ошибки молча исправляйте.

[Secret73]

Максим Тимофеев, Дык я даже и слова против не имею, я все прекрасно понимаю. Но просто и с typeof такая же ошибка в консоли ) Убрал or msg.name == '' и ошибка пропала )

[Web Dentist]

Secret73, Обрабатывайте пустоту сообщения на сервере , и пихайте в msg какую нибудь ошибку

Answer 4

[tyzberd]

dontforget.pro/javascript/primer-ajax-otpravki-for...
https://formden.com/blog/validate-contact-form-jquery
https://codepen.io/SitePoint/pen/akPoad
https://codepen.io/Gix075/pen/ZYMBzO