Javascript関数が応答しない

私のダミーサイトのいくつかのフィールドを検証するはずの外部jsファイルに関数がありますが、応答していないようです。Javascript関数が応答しない

ブラウザのコンソールにエラーが表示されないため、問題がどこにあるか分かりません。私の機能が正しく呼び出されており、スクリプト部分を正しく呼び出すようになっています。

function checkFields(){ 
 

 
    var fname = document.getElementById("firstname").value; 
 
    var lname = document.getElementById("lastname").value; 
 
    var mail = document.getElementById("email").value; 
 
    var phone = document.getElementById("phonenumber").value; 
 
    var pw = document.getElementById("password").value; 
 
    var cpw = document.getElementById("cpassword").value; 
 

 
    if ((fname == "") || (fname == null)) { 
 
    return alert('Error', 'Missing Fields'); 
 
    } 
 
    if ((lname == "") || (lname == null)) { 
 
    return alert('Error', 'Last Name Missing'); 
 
    } 
 
    if ((mail == "") || (mail == null)) { 
 
    return alert('Error', 'Email Missing'); 
 
    } 
 
    if ((phone == "") || (phone == null)) { 
 
    return alert('Error', 'Phone Missing'); 
 
    } 
 
    if ((pw == "") || (pw == null)) { 
 
    return alert('Error', 'Enter a password'); 
 
    } 
 
    if ((cpw == "") || (cpw == null)) { 
 
    return alert('Error', 'Confirm your password please'); 
 
    } 
 
    if (pw != cpw) { 
 
    return alert('Error', 'Passwords do not match'); 
 
    } 
 
    return false; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Website</title> 
 
    <link rel="stylesheet" type="text/css" href="practice.css"> 
 
</head> 
 
<body> 
 
<div style="width:100%"> 
 
    <div id="header"> 
 
     MINIMAL STORE <br /> 
 
    
 
     <div id="head"> 
 
     
 
     </div> 
 
    </div> 
 
    <div id ="left"> 
 
     <div><b>Main Menu</b></div> 
 
     <li><a href="nothing">Home</a></li> 
 
     <li><a href="nothing">Register</a></li> 
 
     <li><a href="nothing">Shop</a></li> 
 
     <li><a href="nothing">My Cart</a></li> 
 
     <li><a href="nothing">Checkout</a></li> 
 
    </div> 
 
    <div id="main"> 
 
    <h1>Register Now!!!</h1> 
 
    <form action="" method="post" onsubmit="return checkFields()"> 
 
     First name:<br> 
 
     <input type="text" id="firstname"> 
 
     <br> 
 
     Last name:<br> 
 
     <input type="text" id="lastname"> 
 
     <br> 
 
     Email:<br> 
 
     <input type="text" id="email"> 
 
     <br> 
 
     Phone Number<br> 
 
     <input type="text" id="phonenumber"> 
 
     <br><br> 
 
     <form action=""> 
 
      Password: <input type="password" id="password"><br> 
 
      Confirm Password: <input type="password" id="cpassword"> 
 
     </form> 
 
     <input type="submit" value="Submit"> 
 
    </form> 
 
    </div> 
 
    
 
    <div id="footer"> 
 
    </div> 
 
</div> 
 
<script type="text/javascript" src="prac.js"></script> 
 
</body> 
 
</html>

出典

2016-07-31 xan

あなたは適切に提出しないようにフォームを引き起こしている別の<form>内<form>あります

<form action=""> 
    Password: <input type="password" id="password"><br> 
    Confirm Password: <input type="password" id="cpassword"> 
</form>

Forms CANNOT be nestedを。パスワードの周りのフォームを削除するだけで、フォームは適切に関数に渡されます。

サイドバー：

alert()は、複数のパラメータを受け付けませんのでご注意ください。

alert("Error\nMissing Fields"); 
return false;

また、関数の最後にtrueを返す必要があります（フォームを送信するには）。

出典

2016-07-31 01:16:37 FrankerZ

ありがとうございます！ – xan

Javascript関数が応答しない

答えて

関連する問題