Запретить отправку формы, если существует ошибка ajax .submit () с .change () - PullRequest
Новая
       16

Запретить отправку формы, если существует ошибка ajax .submit () с .change ()

2 голосов
/ 13 июня 2019

Так что у меня есть эта проблема с кодом jQuery / ajax.Я использовал метод .change всякий раз, когда поле изменяется.Он показывает выходные данные независимо от того, было ли это письмо уже занято или поле ввода пусто.Я знаю, что есть метод .submit и preventDefault(), но я новичок в этом, и я запутался, как использовать .change с .submit одновременно. 

          pic1 = new Image(20, 20);
          pic1.src="images/abc.jpg";
          $(document).ready(function(){

          function isValidEmail(emailAddress) {
             // some regular expressions for email  format validation

      };
            $("#email").change(function() {
            var email = $("#email").val();
            if(isValidEmail(email)){

                $("#status").html('<img 
        style="width:17px;"src="images/abc.jpg" align="absmiddle">&nbsp;Checking availability...');

                $.ajax({ 

                type: "POST", 
                url: "check.php", 
                data: "email="+ email,
                dataType: 'text',

                    success: function(msg){

                        if(msg == 'OK'){
                         //alert ("success");
                $("#email").removeClass('object_error'); // if necessary
                $("#email").addClass("object_ok");
                $("#status").html('&nbsp;<img src="tick2.gif" 
               align="left"><p><strong style="color:green">This email is available</strong></p>');

            } else {
                //alert ("error");
               $("#email").removeClass('object_ok'); // if necessary
               $("#email").addClass("object_error");
               $("#status").html(msg);
           }
        }

    });

    } else {
      $("#status").html('<font color="red">' + 'Enter Valid 
     Email</font>');
     $("#email").removeClass('object_ok'); // if necessary
     $("#email").addClass("object_error");
   }
  });
 });

1 Ответ

1 голос
/ 13 июня 2019

Они оба события, но для изменения и отправки они ведут себя по-разному.Они не запускаются одновременно.

Для отправки это событие для элемента, когда пользователь пытается отправить форму.Для изменения это триггер события, когда значения элемента change .

Источник:1. https://api.jquery.com/submit/2. https://api.jquery.com/change/

Если вы хотите остановить поведение по умолчанию, вы можете проверить добавленный класс (object_error) класс во время события изменения. 

$("form").on('submit', function (e) {
    if($('.object_error').length > 0){
         e.preventDefault();  
         return false;
    }
}
...