Jquery не может получить доступ к форме отправки

Question

У меня есть форма и кнопка ввода; и Ajax запрос и JQuery код проверки данных запускаются из него. Запрос Ajax работает нормально, но код проверки данных не отвечает на отправку формы. Я использую клавишу ввода для отправки формы.

$(document).ready(function() {
  $(":submit").click(function(e) {
    var msg = $("#search").val();
    $.ajax({
      url: 'search.php',
      method: 'POST',
      data: {
        msg: msg
      },
      dataType: 'json',
      success: function(response) {
        $(".content").html("")
        $.each(response, function() {
          $.each($(this), function(i, item) {
            var mycss = (item.Type == 1) ? ' style="color: #ffa449;"' : '';
            $('.content').append('<div class="post"><div class="post-text"> ' + item.MessageText + ' </div><div class="post-action"><input type="button" value="Like" id="like_' + item.ID + '_' + item.UserID + '" class="like" ' + mycss + ' /><span id="likes_' + item.ID + '_' + item.UserID + '">' + item.cntLikes + '</span></div></div>');
          });
        });
      }
    });
    e.preventDefault();
  });

  $('form').submit(function() {
    var name = $.trim($("#search").val());
    if (name.match(/[^a-zA-Z0-9 ]/g)) {
      $('#error').text('Please enter letters and spaces only');
      return false;
    }
    if (name === '') {
      $('#error').text('Please enter some text');
      return false;
    }
    if (name.length > 0 && name.length < 3) {
      $('#error').text('Please enter more letters');
      return false;
    }
  });
});

  

"> 

Answer 1

Не бывает двух событий. Имейте ОДНО событие, и пусть это событие будет отправлять форму

Они мешают друг другу

Переместите профилактический элемент вверх, или форма будет отправлена, если в вашем коде есть ошибки

$(function() {
  $('form').on("submit", function(e) {
    e.preventDefault();
    $('#error').text(""); // reset
    var name = $.trim($("#search").val());
    if (name.match(/[^a-zA-Z0-9 ]/g)) {
      $('#error').text('Please enter letters and spaces only');
      return false;
    }
    if (name === '') {
      $('#error').text('Please enter some text');
      return false;
    }
    if (name.length > 0 && name.length < 3) {
      $('#error').text('Please enter more letters');
      return false;
    }

    $.ajax({
      url: 'search.php',
      method: 'POST',
      data: {
        msg: name
      },
      dataType: 'json', 
      success: function(response) {
        $(".content").html("")
        $.each(response, function() {
          $.each($(this), function(i, item) {
            var mycss = (item.Type == 1) ? ' style="color: #ffa449;"' : '';
            $('.content').append('<div class="post"><div class="post-text"> ' + item.MessageText + ' </div><div class="post-action"><input type="button" value="Like" id="like_' + item.ID + '_' + item.UserID + '" class="like" ' + mycss + ' /><span id="likes_' + item.ID + '_' + item.UserID + '">' + item.cntLikes + '</span></div></div>');
          });
        });
      }
    });
  });
});

Answer 2

Ваш ajax вызов выполняется первым, поскольку он связан с событием нажатия кнопки отправки. E.preventDefault () предотвращает запуск события submit. Вот почему ваша функция проверки никогда не выполняется.

Я бы просто использовал функцию проверки как есть с добавлением строки e.preventDefault(); и добавил бы вызов ajax, когда проверка прошла успешно. Я думаю, это то, что вы хотите?

function doAjax() {
  console.log('look mom, i pretend i\'m doing an ajax call');
}

$('form').submit(function(e) {
  e.preventDefault();
  console.log("look mom, im validating!")
  var name = $.trim($("#search").val());

  if (name.match(/[^a-zA-Z0-9 ]/g)) {
    $('#error').text('Please enter letters and spaces only');
    return false;
  }

  if (name === '') {
    $('#error').text('Please enter some text');
    return false;
  }

  if (name.length > 0 && name.length < 3) {
    $('#error').text('Please enter more letters');
    return false;
  }

  doAjax();
});