Проверка и отправка формы с использованием Javascript + Ajax

Question

Вот что я пытаюсь сделать.

• Когда в моей форме нажимается форма «Отправить», функция javascript будет перебирать все поля формы.

• Для каждого поля будет вызываться функция, которая будет возвращать true / false, чтобы указать, правильно ли она была заполнена или нет.

• Если возвращается false, рядом с этим полем отображается сообщение об ошибке.

• Если все поля верны, он отправляет форму. Если нет, он не отправляет.

Вот сложная часть. Хотя большая часть проверки выполняется с помощью javascript, имя пользователя и адрес электронной почты должны быть подтверждены с помощью ajax, чтобы узнать, используется ли имя пользователя / адрес электронной почты или нет.

Структура, которую я сейчас использую для этой функции ajax, выглядит примерно так:

function validateSomething()
{
  var valid;
  $.post("something.php", {x:y},
  function(data)
  {
     if (isSomething(data))
       valid=true; 
       //Here referring to the valid variable 
       //set outside this function, in the
       // parent function
     else
       valid=false; 
  });
  return valid/
}

Но в настоящее время это не работает.

Что я могу сделать, чтобы заставить его работать, т.е. я могу остановить функцию validateSomething () от возврата значения, пока внутренняя функция не установит значение true / false?

Хотелось бы что-то вроде этой работы:

function validateSomething()
{
  var valid="unset";
  $.post("something.php", {x:y},
  function(data)
  {
     if (isSomething(data))
       valid=true; 
       //Here referring to the valid variable 
       //set outside this function, in the
       // parent function
     else
       valid=false; 
  });
  //Loop without returning until valid is set to true or false
  while (valid=='unset')
  {
     //Do nothing?
  }
  return valid/
}

Answer 1

Вы можете заставить ajax-вызов ждать с помощью async: false.

Как это с помощью jquery:

function validateSomething() {
    var valid;
    $.ajax({
        url: "something.php",
        data: {x: y},
        type: "GET",
        async: false, // this makes the ajax-call blocking
        dataType: 'json',
        success: function (response) {
            valid= response.valid;
        }
     });
     return valid;
}

Однако большой выигрыш при использовании AJAX заключается в том, что он асинхронный. Этот синхронный вызов может заблокировать браузер во время ожидания сервера.

Answer 2

Вы, вероятно, не хотите. (Или, более уместно, «Ступай, но будь осторожен».)

Подтверждение через AJAX очень модно и круто. Но это не замена проверки на стороне сервера. А проверка AJAx - это проверка не на стороне сервера. Я могу взять возврат вашей функции, которая говорит «ложь», и перевести ее в «истину», и счастливо отправить форму, даже если вы проверили, чтобы убедиться, что имя пользователя не было взято «на сервере». Javascript работает на клиенте и ему нельзя доверять.

Любая проверка, выполняемая с помощью вызова AJAX, должна быть повторно выполнена на сервере, когда вы фактически отправляете форму.

Если вы сделаете это, то да, валидация AJAX, опять же, модная, классная и потрясающая. Так что дерзай. Чтобы отправить форму с использованием javascript (например, в функции обработчика обратного вызова AJAX), вы должны сказать:

 if(formwasValid)
 {
      document.getElementById('idOfForm').submit();

      $('#idOfForm').submit(); //jQuery
 }
 else
 {
      alert('Invalid text');
 }

Answer 3

Я прекратил выполнять расширенную проверку формы на стороне клиента, так как в любом случае код должен дублироваться на стороне сервера.

На стороне клиента я просто делаю некоторую базовую проверку синтаксиса полей с помощью регулярных выражений. Эти проверки будут немедленно инициированы, когда пользователь начнет печатать, но они просто визуально уведомят о том, что что-то пошло не так (красная рамка, другой цвет фона, красный крестик рядом с полем ...).

Я не запрещаю пользователю отправлять даже недопустимые формы: затем начинает работать серверный код с более подробными проверками, которые могут легко реструктурировать форму для отделения допустимых полей от недействительных и генерировать подробные объяснения почему проверка не удалась.