私のjavascriptのフォーム検証は、Firefox

Question

JavaScriptでChromeで完璧に動作しますが、ない：

function validateForm() 
{ 
    var x=document.forms["newsletter"]["agree"].value; 
    if (newsletter.agree.checked != 1) 
    { 
     alert("Checkbox must be checked"); 
     return false; 
    } 


    var y=document.forms["newsletter"]["email"].value; 
    var atpos=y.indexOf("@"); 
    var dotpos=y.lastIndexOf("."); 
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=y.length) 
    { 
     alert("Not a valid e-mail address"); 
     return false; 
    } 

    else 
    { 
     return true; 
    } 
} 

そして、私のHTML

<div id="signup"> 
<form id="newsletter" action="" method="get" onsubmit="return validateForm()"> 
<fieldset> 
<p>Email: <input type="text" name="email" size="35"/> 
Please send me the monthly newsletter 
<input type="checkbox" checked="checked" name="agree" value=""/> 
<br/> 
<input type="submit" value="Signup"/></p> 
</fieldset> 
</form> 
</div><!-- signup --> 

私はChromeで無効なエントリを提出する]をクリックすると、警告メッセージが表示され、フォームは提出しません。しかし、Firefoxで同じことをすると、フォームは警告メッセージなしで送信されます。

私はこれを5時間作業していますが、私は本当に分かりません。助けてくれてありがとう、それは非常に感謝しています。

Answer 1

私はあなたを助けるかもしれないと思います。

<div id="signup"> 
     <form id="newsletter" action="" method="get" onsubmit="return validateForm()"> 
     <fieldset> 
     <p>Email: <input type="text" name="email" id="email" size="35"/> 
     Please send me the monthly newsletter 
     <input type="checkbox" checked="checked" name="agree" id="agree" value=""/> 
     <br/> 
     <input type="submit" value="Signup"/></p> 
     </fieldset> 
     </form> 
     </div><!-- signup --> 



    function validateForm() 
    { 
     var agreeEl = document.getElementById("agree"); 
     if (agreeEl.checked != 1) 
     { 
      alert("Checkbox must be checked"); 
      return false; 
     } 


     var emailEl = document.getElementById("email"); 
     var atpos = emailEl.value.indexOf("@"); 
     var dotpos = emailEl.value.lastIndexOf("."); 
     if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= y.length) { 
      alert("Not a valid e-mail address"); 
     return false; 
     } 

     return true; 
    } 

Answer 2

まず、フォームを送信するために「投稿」ではなく「取得」を使用する理由はありますか？私はあなたのフォームを 'get'を使って提出しようとしたときにクロームが私に文句を言う。

http://jsfiddle.net/jsWyw/でフォームをテストする簡単なフィドルをセットアップしました。あなたの 'onSubmit'の代わりにフォームの送信を処理するためにJQueryを使用すると、すべてうまく動作します。だから私はonSubmitで何が起こっていたのかを見て、このスレッドを見つけました：http://productforums.google.com/forum/#!topic/chrome/Z3MD5Od3oQM。しようとする

もの：

• ポストを使用する代わりに
• 使用を取得することを確認してください 'をonSubmit' の代わりに 'をonSubmit'
• のスクリプトが<script type="text/javascript" src="javascript.js"></script>

を使用して含まれていることを確認してください

これが失敗した場合は、onSubmitの代わりにsubmitイベントを自分でJavascriptで処理することをおすすめします。これは少しばかげているようですnクロム。

Answer 3

エラーコンソールを見ましたか？あなたのvalidateFormハンドラは、window.newsletterが（標準ではFirefoxにはない）最初のif()のdocument.forms ["newsletter"]を使用する代わりに、フォーム要素であると仮定しています。その行がスローされ、onsubmitハンドラがフォームをスローするとフォームがただちに送信されます。あなたは**休憩を取る、その上に自分の頭を叩いての5時間後にそれを把握することができない場合でも、もちろんエラーコンソールは

Answer 4

function validateForm() 
{ 
var x=document.forms["myForm"]["email"].value; 
var atpos=x.indexOf("@"); 
var dotpos=x.lastIndexOf("."); 
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) 
    { 
    alert("Not a valid e-mail address"); 
    return false; 
    } 
} 


<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post"> 
    Email: <input type="text" name="email"> 
    <input type="submit" value="Submit"> 
</form>