Mozilla FirefoxでJavaScriptコードが動作しない

Question

Chrome（最新バージョン）、IE、およびEdgeの魅力のように機能しています（IEとEdgeでJavaScriptを有効にする必要があります）。

このコードは、正しい場合は電子メールを検証し、間違っている場合はフォームを送信してフォームアクションを防止します。

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() { 
 
    var email = $("#email").val(); 
 
    if (validateEmail(email)) { 
 

 
     event.preventDefault(); 
 
     setTimeout(function() { 
 
      $("#cpa-form").submit(); 
 
     }, 5000); 
 
     $("#error").text('Well done'); 
 
     $("#error").css({ 
 
      'background-color': '#dff0d8', 
 
      'color': '#3c763d', 
 
      'border-color': '#d6e9c6', 
 
      'position': 'absolute', 
 
      'padding': '15px', 
 
      'margin-top': '5px', 
 
      'margin-bottom': '5px', 
 
      'border': '1px solid transparent', 
 
      'border-radius': '4px' 
 

 
     }); 
 
    } else { 
 
     event.preventDefault(); 
 
     $("#error").text('Something went wrong'); 
 
     $("#error").css({ 
 
      'background-color': '#f2dede', 
 
      'color': '#a94442', 
 
      'border-color': '#ebccd1', 
 
      'position': 'absolute', 
 
      'padding': '15px', 
 
      'margin-top': '5px', 
 
      'margin-bottom': '5px', 
 
      'border': '1px solid transparent', 
 
      'border-radius': '4px' 
 

 
     }); 
 

 
    } 
 
    return false; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<form id="cpa-form"> 
 
     <input type="email" id="email" name="email" value="email"> 
 
     <br><br> 
 
     <button onclick="validate()" >button</button> 
 
    
 
    </form> 
 
    <span id="error"></span>

Answer 1

停止HTML内から愚かな呼び出しを使用して、関数呼び出しでeventを定義しました。スニペットの更新されたJSコードを参照してください。

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); 
 
} 
 

 
$('button').click(function(event) { 
 
    var email = $("#email").val(); 
 
    if (validateEmail(email)) { 
 

 
     event.preventDefault(); 
 
     setTimeout(function() { 
 
      $("#cpa-form").submit(); 
 
     }, 5000); 
 
     $("#error").text('Well done'); 
 
     $("#error").css({ 
 
      'background-color': '#dff0d8', 
 
      'color': '#3c763d', 
 
      'border-color': '#d6e9c6', 
 
      'position': 'absolute', 
 
      'padding': '15px', 
 
      'margin-top': '5px', 
 
      'margin-bottom': '5px', 
 
      'border': '1px solid transparent', 
 
      'border-radius': '4px' 
 

 
     }); 
 
    } else { 
 
     event.preventDefault(); 
 
     $("#error").text('Something went wrong'); 
 
     $("#error").css({ 
 
      'background-color': '#f2dede', 
 
      'color': '#a94442', 
 
      'border-color': '#ebccd1', 
 
      'position': 'absolute', 
 
      'padding': '15px', 
 
      'margin-top': '5px', 
 
      'margin-bottom': '5px', 
 
      'border': '1px solid transparent', 
 
      'border-radius': '4px' 
 

 
     }); 
 

 
    } 
 
    return false; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="cpa-form"> 
 
     <input type="email" id="email" name="email" value="email"> 
 
     <br><br> 
 
     <button>button</button> 
 
    
 
    </form> 
 
    <span id="error"></span>