2017-03-01 6 views
0

Javascriptで検証するためにフォームを取得できません。私はいろいろなことを試しましたが、うまく動作しません。私は完全に基本的な何かを逃している可能性があります、私はこれでかなり新しいです。私がおそらく変えることができることを教えてください。Javascriptで検証するフォームを取得できません

<!DOCTYPE html> 
 

 
<html lang = "en"> 
 
<head> 
 
\t <title> </title> 
 
\t <meta charset = "utf-8" /> 
 
\t 
 
</head> 
 
<body> 
 
\t <script lang = "text/javascript"> 
 
\t 
 
\t document.getElementById("myForm").onsubmit = validateForm(); 
 
\t 
 
\t function zipcheck(sZip) 
 
\t { 
 
\t \t var postalRegex = /^d{5}(-\d{4})?$/; 
 
\t \t return postalRegex.test(sZip); 
 
\t } 
 
\t function validateForm() 
 
\t { 
 
\t \t if (zipcheck(document.getElementById("zip")) 
 
\t \t \t return true; 
 
\t \t else 
 
\t \t { 
 
\t \t \t alert(document.getElementById("zip") + " is not a valid zip code"); 
 
\t \t \t return false; 
 
\t \t } 
 
\t } 
 
\t </script> 
 
\t <form id = "myForm" action = "" > 
 
\t <p> 
 
\t 
 
\t <label> Zip Code 
 
\t \t <input type = "text" id = "zip" /> 
 
\t </label> 
 
\t 
 
\t <input type = "submit" name = "submit" /> 
 
\t 
 
\t </p> 
 
\t </form> 
 
\t 
 
</body> 
 
</html>

答えて

1

あなたがHTML要素のない値をチェックし、ある問題。ここはdocument.getElementById("zip").value

document.getElementById("myForm").onsubmit = validateForm; 
 
\t 
 
\t function zipcheck(sZip) 
 
\t { 
 
\t \t var postalRegex = /^d{5}(-\d{4})?$/; 
 
\t \t return postalRegex.test(sZip); 
 
\t } 
 
    
 
\t function validateForm() 
 
\t { 
 
\t \t if (zipcheck(document.getElementById("zip").value)){ 
 
\t \t \t return true; 
 
\t \t }else 
 
\t \t { 
 
\t \t \t alert(document.getElementById("zip").value + " is not a valid zip code"); 
 
\t \t \t return false; 
 
\t \t } 
 
\t }
<!DOCTYPE html> 
 
<html lang = "en"> 
 
<head> 
 
\t <title> </title> 
 
\t <meta charset = "utf-8" /> 
 
</head> 
 
<body> 
 
\t <form id = "myForm" action="/test" method="get" > 
 
\t <p> 
 
\t <label> Zip Code 
 
\t \t <input type = "text" id = "zip" /> 
 
\t </label> 
 
\t <input type = "submit" name = "submit" /> 
 
\t </p> 
 
\t </form> 
 
</body> 
 
</html>

でなければなりませんhttps://jsfiddle.net/u9suy516/

jsfiddlerオプション情報に関するワーキングサンプルです:addEventListenerを使用しているときにも、上のpreventDefault()機能を使用する必要があります渡されたeventパラメータ、しかしは必要ありません文章。

function validateForm(event) 
{ 
    if (!zipcheck(document.getElementById("zip").value)) { 
     alert(document.getElementById("zip").value + " is not a valid zip code"); 
     event.preventDefault(); 
    } 
} 
+0

迅速な対応をありがとう!私はこれらのコードを変更しましたが、まだフォームを検証しません。 – NerevarineKing

+0

私は答えを編集しました。他の部分は正しくありません。 –

+0

'document.getElementById(" myForm ")。onsubmit = validateForm();' 'document.getElementById(" myForm ")。onsubmit = validateForm;'または'document.getElementById(" myForm ")。addEventListener(" submit "、validateForm)' –

関連する問題