jQuery ajax: как удалить submit, если проверка ajax не удалась?

Question

У меня есть поле электронной почты в области настроек пользователя. Разумеется, все электронные письма уникальны, поэтому мне нужно проверить, что электронная почта не используется уже кем-то другим, прежде чем отправлять форму.

Вот код:

var email = $("input#email-id").val(); 

$("#form-id").submit(function(){ 
    $.ajax({ 
     url: "/ajax/email?email=" + email, 
     success: function(data){ 
      if(data != 'ok'){ 
       alert("Email is used already"); 
       return false; 
      } 
     } 
    }); 
}); 

Так что, если data не 'ok' он должен уничтожить отправку формы, поскольку if() возвращает false, но он не имеет и форма представляет, как обычно, и даже предупреждения Безразлично» t появляется!

Я проверил ответ ajax, и он отлично работает (возвращается 'user_already', если используется электронная почта). Так что я сделал не так?

Спасибо!

Answer 1

С ajax является асинхронным по своей природе, вы не можете этого сделать. Если вы действительно хотите это сделать, вы можете отправить форму внутри обработчика успеха. Попробуй это.

function submitHandler(){ 
    var email = $("input#email-id").val(); 

    $.ajax({ 
     url: "/ajax/email?email=" + email, 
     success: function(data){ 
      if(data != 'ok'){ 
       alert("Email is used already"); 
       return false; 
      } 
      else{ 
       //Once the data is ok you can unbind the submit handler and 
       //then submit the form so that the handler is not called this time 
       $("#form-id").unbind('submit').submit(); 
      } 
     } 
    }); 
    return false;//This will prevent the form to submit 
} 
$("#form-id").submit(submitHandler); 

Answer 2

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

$('#form-id').submit(function() { 

    if($(this).data('valid')) { 
     //you've already validated, allow the form to submit 
     return true; 
    } else { 
     //send an ajax request and wait for the response to really submit 
     $.ajax({ 
      url: "/ajax/email?email=" + email, 
      success: function(data){ 
       if(data == 'ok') { 
        //submit the form again, but set valid data so you don't do another Ajax request 
        $('#form-id').data('valid', true); 
        $('#form-id').submit(); 
       } else { 
        alert("Email is used already"); 
       } 
      } 
     }); 
     return false; 
    } 

    //clear the validation flat 
    $(this).data('valid', false); 

}); 

Answer 3

Там в ответ принят, но я думал, что я разделю еще один способ сделать это.

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

$("#form-id").submit(function(event, forceSubmit){ 

    //the normal submit will not have the extra parameter so we need to initialize it to not throw any errors, 
    //typeof is great for this since it always returns a string 
    if (typeof(forceSubmit) == 'undefined') { forceSubmit = false; } 

    //now check if this is a normal submit or flagged to allow submission 
    if (forceSubmit === false) { 
     var $form = $(this); 
     $.ajax({ 
      url: "/ajax/email?email=" + email, 
      success: function(data){ 
       if(data != 'ok'){ 
        alert("Email is used already"); 
       } else { 
        $form.trigger('submit', true); 
       } 
      } 
     }); 

     //since this submit event is for checking the username's availability we return false to basically: event.preventDefault(); event.stopPropagation(); 
     return false; 
    } 
}); 

.trigger(): http://api.jquery.com/trigger

Answer 4

Если JSON участвует, возвращаемые данные в data.d - см http://encosia.com/a-breaking-change-between-versions-of-aspnet-ajax/ для объяснения.

Answer 5

В вашем коде у вас есть две функции. Одним из них является функция передается submit:

$("#form-id").submit(function() { 
    // code 
}); 

Другая функция передается в обработчик успеха вызова AJAX:

success: function(data) { 
    // code 
} 

Вы возвращаетесь false от второй функции. Это означает, что когда первая функция возвращается, она не возвращает false. Но подача формы прекращается, только если первая функция возвращает false.

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

Этот код поможет вам достичь этого:

var submitHandler = function() { 
    $.ajax({ 
     url: "/ajax/email?email=" + email, 
     success: function(data) { 
      if (data != 'ok') { 
       alert("Email is used already"); 
       // no need to do anything here 
      } else { 
      // success, we should submit the form programmatically 
      // first we de-attach the handler, so that submitHandler won't be called again 
      // and then we submit 
      $("#form-id").unbind('submit').submit(); 
      // now we reattach the handler, so that submit handler is executed if the user 
      // submits the form again 
      $("#form-id").submit(submitHandler); 
      } 
     } 
    }); 

    // always return false, because if validation succeeds, we will submit the 
    // form using JavaScript 
    return false; 
}; 

$("#form-id").submit(submitHandler); 

Answer 6

Я уже +1 @ShankarSangoli, потому что он получил это право, однако, я не чувствую его 100% полным, есть также состояние ошибки, которые могут возникают при проблемах сети или сбое сервера.

$('#form-id').submit(function(ev) { 
    ev.preventDefault(); // cancels event in jQuery typical fashion 
    $.ajax({ 
     url: "/ajax/email", 
     data : { email: $("input#email-id").val()}, 
     success : function(d) { 
      if (d !== 'ok') { 
       alert('email in use'); 
      } 
     }, 
     error : function(a,b,c) { 
      // put your error handling here 
      alert('a connection error occured'); 
     } 
    }); 
}); 

Есть еще более эффективные способы справиться с этим, как я написал некоторые большие формы плагин для JQuery, которые HTML5 совместимые и конкурирующие инструменты JQuery для простоты использования.

Вы можете увидеть пример здесь ->http://www.zipstory.com/signup

Днем кодирования.