2016-07-31 15 views
1

Ich habe eine Funktion in einer externen JS-Datei, die einige Felder auf meiner Dummy-Site validieren soll, aber es scheint nicht zu reagieren.Javascript Funktion reagiert nicht

Meine Browser-Konsole zeigt keine Fehler, deshalb bin ich mir nicht sicher, wo das Problem ist, da ich sicher bin, dass ich meine Funktion richtig anrufe und der Skriptteil, um es richtig zu nennen.

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>

Antwort

1

Sie haben eine <form> innerhalb eines anderen <form> die Ihr Formular ordnungsgemäß nicht einreichen verursacht:

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

Forms CANNOT be nested. Entfernen Sie einfach das Formular um das Passwort, und das Formular wird ordnungsgemäß an Ihre Funktion übergeben.

Sidebar:

Bitte beachten Sie alert() nicht akzeptiert mehrere Parameter. Sie sollten wie auch etwas tun:

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

Und am Ende der Funktion, sollten Sie wahr zurückkehren (Um das Formular abschicken).

+0

danke das funktioniert! – xan