Eメールを送信する前の電子メールのフォーマット

Question

私はインターネット上で見つかったコードを、メッセージが送信される前に私の連絡フォームの電子メールフィールドでのみ実行するように修正しようとしています（私はtype="text" required/を他のフィールド）。

問題は何である（「送信ボタンを」私は、フォームをクリックしても何も起こらない）

は、私は以下のコードを思い付いたが、それは動作しませんか？

多くのおかげで、

$(document).ready(function() { 
    $("#contactfrm").submit(function(e) { 
     e.preventDefault(); 
     var email = $("#email").val(); 

     function isValidEmail(emailAddress) { 
      var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); 
      return pattern.test(emailAddress); 
     }; 
     if (isValidEmail(email)) { 
      $.ajax({ 
       type: "POST", 
       url: "sendmessagetest.php", 
       data: dataString, 
       success: function() { 
        $('button[name="submit"]').hide(); 
        $('.error').hide() 
        $('.success').fadeIn(1000); 
       } 
      }); 
     } else { 
      $('.error').fadeIn(1000); 
     } 
     return false; 
    }); 

}); 

HTML：

<form class="clearfix" id="contactfrm" method="post" name="contactfrm"> 
    <div class="tagbox wow fadeInRightBig"><i class="fa fa-pencil"></i> Formulaire de contact 
    </div> 
    <input class="_input-1 input-40pc" id="first_name" name="first_name" placeholder="Votre Prénom" type="text" required/> 
    <input class="_input-1 input-40pc" id="last_name" name="last_name" placeholder="Votre nom de famille" type="text" required/> 
    <input class="_input-2 input-40pc" id="email" name="email" placeholder="Votre adresse e-mail" type="text" required/> 
    <input class="_input-1 input-40pc" id="phone" name="phone" placeholder="Numéro de téléphone" type="text"> 
    <textarea id="message" name="message" placeholder="Votre message"></textarea> 
    <button class="wow fadeInUp" name="submit" type="submit" value="Envoyer"><i class="fa fa-sign-in"></i> ENVOYER&nbsp;</button> 
    </form> 

Answer 1

あなたのコードは、JSエラーを生成：

Uncaught ReferenceError: dataString is not defined

dataString変数定義（サーバーに送信するデータである必要があります）がないためです。

- isValidEmail(emailAddress)メソッドをsubmitイベントハンドラの外に移動します。フォームの1回の送信ごとにこのメソッドを再定義するのは無意味です。質問以下のコメントについては

$(document).ready(function() { 

    // Move the method outside of the form submit event handler: 
    function isValidEmail(emailAddress) { 
     var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); 
     return pattern.test(emailAddress); 
    }; 

    $("#contactfrm").submit(function(e) { 
     e.preventDefault(); 

     // define dataString variable (serialize the form): 
     var dataString = $(this).serialize(); 

     var email = $("#email").val();  
     if (isValidEmail(email)) { 
      $.ajax({ 
       type: "POST", 
       url: "sendmessagetest.php", 
       data: dataString, 
       success: function() { 
        $('button[name="submit"]').hide(); 
        $('.error').hide(); 
        $('.success').fadeIn(1000); 
       } 
      }); 
     } else { 
      $('.error').fadeIn(1000); 
     } 

     // no need for this because you have used e.preventDefault(); 
     // return false; 
    }); 

}); 

---

- あなたは次のことを試すことができます。

$.ajax({ 
    type: "POST", 
    url: "sendmessagetest.php", 
    data: dataString, 
    // specify the data type: 
    dataType: "json", 
    success: function(response) { 
     // check server response: 
     if(response.status){ 
      $('button[name="submit"]').hide(); 
      $('.error').hide(); 
      $('.success').fadeIn(1000); 
     }else{ 
      $('.success').hide(); 
      $('.error').text(response.message).fadeIn(1000); 
     } 
    } 
}); 

Answer 2

は、この方法を試してください。

function isValidEmail(emailAddress) { 
    var pattern = new RegExp(/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i); 
    return pattern.test(emailAddress); 
};