私はajax呼び出しで電子メールの入力にいくつかの検証をしていますが、検証は実行されますが、呼び出しがなぜこれが起こっているのかに関するいくつかの助けを与えることはできませんか？

Question

これは、電子メールの入力です：

<div class="input-group emailInput" style="min-width:300px;max-width:637px;"> 
    <input type="email" class="form-control input1" id="emailAddress" placeholder="Email Address"> 
    <span class="input-group-btn"> 
    <button class="btn btn-secondary input2" type="button" onclick="validate()" style="padding:0px;border:0px;"><div style="padding:7px; background-color:#FF2B68;color:white;">></div></button> 
    </span> 
</div> 

スクリプト：

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
     return re.test(email); 
    } 

    function validate() 
    { 
     $("#result").text(""); 

     var email = $("#emailAddress").val(); 

     if (validateEmail(email)) { 
      $("#result").text(" Email sent."); 
      $("#result").css("color", "green"); 
      function validate() 
      { 
       var settings = { 
        "async": true, 
        "crossDomain": true, 
        "url": "https://mandrillapp.com/api/1.0/messages/send-template.json", 
        "method": "POST", 
        "headers": { 
        "content-type": "application/json" 
        }, 
        "processData": false, 
        "data": "{\n \"key\": \"key goes here\",\n\t\"message\":{\n\t\t\"subject\": \"test invitation\",\n\t\t\"from_email\": \"info@test.co.za\",\n\t\t\"from_name\": \"Test Group\",\n\t\t\"to\": [{\"email\": \"email.com\", \"name\": \"Applicant\"}]\n\t},\n\t\"template_content\": \n\t[\n\t\t{\n\t\t\t\"name\": \"test\",\n\t\t\t\"content\": \"https://www.test.co.za/invite/\"\n\t\t},\n\t\t{\n\t\t\t\"name\": \"createAccount\",\n\t\t\t\"content\": \"test\" \n\t\t}\n\t],\n \"template_name\": \"test-template\"\n}" 
       } 
       $.ajax(settings).done(function (response) { 
        console.log(response); 
       }); 
      }; 

     }else { 
      $("#result").text(" Please enter a valid email address."); 
      $("#result").css("color", "red"); 
     } 
     return false; 
    } 

    $("form").bind("submit", validate); 

Answer 1

あなたが検証機能内部の間違った検証関数宣言を持っています。これの中にAjaxコールをラップする必要はありません。以下のコードは正常に動作します。

var validate = function() 
    { 
     $("#result").text(""); 

     var email = $("#emailAddress").val(); 

     if (validateEmail(email) == true) { 
      $("#result").text(" Email sent."); 
      $("#result").css("color", "green"); 


       var settings = { 
        "async": true, 
        "crossDomain": true, 
        "url": "https://mandrillapp.com/api/1.0/messages/send-template.json", 
        "method": "POST", 
        "headers": { 
        "content-type": "application/json" 
        }, 
        "processData": false, 
        "data": "{\n \"key\": \"key goes here\",\n\t\"message\":{\n\t\t\"subject\": \"test invitation\",\n\t\t\"from_email\": \"info@test.co.za\",\n\t\t\"from_name\": \"Test Group\",\n\t\t\"to\": [{\"email\": \"email.com\", \"name\": \"Applicant\"}]\n\t},\n\t\"template_content\": \n\t[\n\t\t{\n\t\t\t\"name\": \"test\",\n\t\t\t\"content\": \"https://www.test.co.za/invite/\"\n\t\t},\n\t\t{\n\t\t\t\"name\": \"createAccount\",\n\t\t\t\"content\": \"test\" \n\t\t}\n\t],\n \"template_name\": \"test-template\"\n}" 
       } 
       $.ajax(settings).done(function (response) { 
        console.log(response); 
       }); 


     }else { 
      $("#result").text(" Please enter a valid email address."); 
      $("#result").css("color", "red"); 
     } 
     return false; 
    } 

P.S：このような問題については、常に開発コンソールを使用してコードの内容を確認してください。あなたはconsole.log（ "comment/object"）を入れて、コードが壊れている点を確認することができます。