Php Ajax連絡フォームsubmit submitボタンをクリックするとエラーが繰り返される

Question

phpとjquery ajaxによって連絡フォームを作成しました。以下のコードは問題なく動作しますが、私はトウの問題があります。 1つ：送信ボタンをクリックするとすべてのエラーが表示されます。たとえば、入力名が空の場合は空のエラーだけを表示し、長さのエラーは表示しません。 2つ：送信ボタンを複数回クリックすると、毎回エラーが繰り返されたり表示されたりします。私のコードを見て、あなたがそれを見たら私の問題と他の問題を解決してください。

jQuery(function() { 
jQuery('#contactForm').submit(function(event) { 
    var bsnConData = { 
     'name':jQuery('#bsnname').val(), 
     'subject':jQuery('#bsnsubject').val(), 
     'email':jQuery('#bsnemail').val(), 
     'message':jQuery('#bsnmessage').val() 
    }; 
    jQuery.ajax({ 
     url: 'http://localhost/wp/wp-content/plugins/Yallanpe-BSN/inc/class-contact-inc.php', 
     type: 'POST', 
     data: bsnConData, 
     dataType: 'json', 
     cache: false 
    }).done(function(data) { 
     if (data.success == false) { 
      if (data.errors.nameEmpty) { 
       jQuery('.form-name').append('<p>'+ data.errors.nameEmpty +'</p>'); 
      } 
      if (data.errors.nameLengthErrors) { 
       jQuery('.form-name').append('<p>'+ data.errors.nameLengthErrors +'</p>'); 
      } 
      if (data.errors.messageEmpty) { 
       jQuery('.form-message').append('<p>'+ data.errors.messageEmpty +'</p>'); 
      } 
      if (data.errors.emailEmpty) { 
       jQuery('.form-email').append('<p>'+ data.errors.emailEmpty +'</p>'); 
      } 
     } else { 
      jQuery('#response').html('<p>'+ data.errors.messageSent +'</p>'); 
     } 
    }).fail(function(data) { 
     console.log('Email Error'); 
    }); 
    event.preventDefault(); 
}); 
}); 

Answer 1

"Else If"を使用すると、1つのエラーのみに制限することができます。コードの多重起動を防ぐには、グローバルフラグ（myFlag）を作成します。

var myObject = {}; 
myObject.myFlag = false; 

jQuery(function() { 
jQuery('#contactForm').submit(function(event) { 
    var bsnConData = { 
     'name':jQuery('#bsnname').val(), 
     'subject':jQuery('#bsnsubject').val(), 
     'email':jQuery('#bsnemail').val(), 
     'message':jQuery('#bsnmessage').val() 
    }; 
    jQuery.ajax({ 
     url: 'http://localhost/wp/wp-content/plugins/Yallanpe-BSN/inc/class-contact-inc.php', 
     type: 'POST', 
     data: bsnConData, 
     dataType: 'json', 
     cache: false 
    }).done(function(data) { 
     if(myObject.myFlag != true){ 
     if (data.success == false) { 
      myObject.myFlag = true; 
      if (data.errors.nameEmpty) { 
       jQuery('.form-name').append('<p>'+ data.errors.nameEmpty +'</p>'); 
      } 
      else if (data.errors.nameLengthErrors) { 
       jQuery('.form-name').append('<p>'+ data.errors.nameLengthErrors +'</p>'); 
      } 
      else if (data.errors.messageEmpty) { 
       jQuery('.form-message').append('<p>'+ data.errors.messageEmpty +'</p>'); 
      } 
      else if (data.errors.emailEmpty) { 
       jQuery('.form-email').append('<p>'+ data.errors.emailEmpty +'</p>'); 
      } 
     } else { 
      jQuery('#response').html('<p>'+ data.errors.messageSent +'</p>'); 
     } 
     } 
    }).fail(function(data) { 
     console.log('Email Error'); 
    }); 
    event.preventDefault(); 
}); 
}); 

Answer 2

送信前にjqueryでフォームの検証を行うことができます。サーバーでもこの情報の妥当性を覚えておいてください。あなたのphpファイルの

jQuery(function() { 
    jQuery('#contactForm').submit(function(event) { 
    event.preventDefault(); 

    if(jQuery('#bsnname').val() == ''){ 
     alert('bs name is empty'); 
     return; 
     } 
if(jQuery('#bsnsubject').val() == ''){ 
     alert('bsnsubject is empty'); 
     return; 
     } 
if(jQuery('#bsnemail').val() == ''){ 
     alert('bsnemail is empty'); 
     return; 
     } 
if(jQuery('#bsnmessage').val() == ''){ 
     alert('bsnmessage is empty'); 
     return; 
     } 
     var bsnConData = { 
      'name':jQuery('#bsnname').val(), 
      'subject':jQuery('#bsnsubject').val(), 
      'email':jQuery('#bsnemail').val(), 
      'message':jQuery('#bsnmessage').val() 
     }; 
     jQuery.ajax({ 
      url: 'http://localhost/wp/wp-content/plugins/Yallanpe-BSN/inc/class-contact-inc.php', 
      type: 'POST', 
      data: bsnConData, 
      dataType: 'json', 
      cache: false 
     }).done(function(data) { 
      console.log('done'); 
     }).fail(function(data) { 
      console.log('Email Error'); 
     }); 
     event.preventDefault(); 
    }); 
    }); 

あなたはsomethig同様の操作を行うと、あなたのPHPからの応答は何