Javascript aktualisiert den Bildschirm

Ich benutze dies um mein Formular zu validieren, so dass jedes Feld leer bleibt eine Nachricht erscheint. Ich bekomme die Nachricht angezeigt, aber es startet die Seite direkt danach neu.Javascript aktualisiert den Bildschirm

HTML-Code:

<head> 
    <title> Flower Spotter</title> 
    <link rel="stylesheet" type="text/css" href="..//css/flower.css"/> 
    <script type= "text/javascript" src="..//js/flower.js"></script> 


</head> 

<body> 

    <div id="container"> 
     <div id="header"> 
      <img src="..//img/orchid.jpg" alt="bann"/><br/> 
      <h1 class="style1 style2">Flower Spotter </h1> 
     </div> 
     <div id="menu"> 
      <ul> 
       <li><a href="../index.html">Home</a></li> 
       <li><a href="gallery.html">Gallery</a></li> 
       <li><a href="register.html">Register</a></li> 
       <li><a href="contact.html">Contact Us</a></li> 
      </ul> 
     </div> 

      <div id="formControl"> 
       <form id="form" action="" method="post" onsubmit="validateForm();"> 
        <fieldset> 
         <legend>Personal Information</legend> 

         <label> First Name: </label> <br/> 
          <input type="text" id="fname" name="fname"/> <br/> 
          <span id="f_error"></span><br/><br/> 

         <label>Last Name </label><br/> 
          <input type="text" name="lname" id="lname"/><br/><br/> 
          <span id="l_error"></span><br/><br/> 

         <label> Sex: </label><br/> 
          Male <input type="radio" id="msex" name="sex" value="Male"/> 
          Female <input type="radio" id="fsex" name="sex" value="female"/> <br/> <br/> <br/> &nbsp;&nbsp; 

         <label> Address: </label><br/> 
          <textarea id="address" name="address" rows="0" cols="0"></textarea> 
          <br/> <br/> 
          <span id="ad_error"></span><br/><br/> 

         <label>Email Address</label><br/> 
          <input type="text" id="email" name="email"/><br/><br/> 
          <span id="em_error"></span><br/><br/> 

         <label> Password: </label><br/> 
          <input type="password" id="pword" name="pword"/> <br/> <br/> 
          <span id="p_error"></span><br/><br/> 

         <label>Confirm Password: </label><br/> 
          <input type="password" id="cword" name="cword"/> <br/> <br/> 
          <span id="c_error"></span><br/><br/> 

         <input type="submit" value="Submit"/> 
         <input type="reset" value="Reset"/> 


        </fieldset> 

       </form> 

      </div> 




     <div id="footer"> 
      <ul> 
       <li><a href="../index.html">Home</a></li> 
       <li><a href="gallery.html">Gallery</a></li> 
       <li><a href="register.html">Register</a></li> 
       <li><a href="contact.html">Contact Us</a></li> 
      </ul> 
     </div> 
    </div> 

</body>

Javascript-Code:

function validateForm() 
{ 
    //delacring variables 
    var firstName, lastName, address, email, pword, cword; 

    check=false; 
    error=false; 

    firstName=document.getElementById("fname").value; 
    lastName=document.getElementById("lname").value; 
    address=document.getElementById("address").value; 
    email=document.getElementById("email").value; 
    pword=document.getElementById("pword").value; 
    cword=document.getElementById("cword").value; 


    //checking to see if anything was entered 
    if(firstName=="" || firstName==null) 
     { 
      //sending an error message to the user if the cell is empty 
      document.getElementById("f_error").innerHTML="You must enter your first name"; 
      error=true; 
      return false; 
     } 
    else 
     document.getElementById("f_error").innerHTML="";   


    if(lastName=="" || lastName==null) 
     { 
      //sending an error message to the user if the cell is empty 
      document.getElementById("l_error").innerHTML="You must enter your last name"; 
      error=true; 
      return false; 
     } 
    else 
     document.getElementById("l_error").innerHTML="";   


    if(address=="" || address==null) 
     {    
      document.getElementById("ad_error").innerHTML="You must enter your Address"; 
      error=true; 
      return false; 
     } 
    else 
     document.getElementById("ad_error").innerHTML=""; 


    if(email=="" || email==null) 
     {    
      document.getElementById("em_error").innerHTML="You must enter your Email Address"; 
      error=true; 
      return false; 
     } 
    else 
     document.getElementById("em_error").innerHTML="";  


    if(pword=="" || pword==null) 
     {    
      document.getElementById("p_error").innerHTML="You must enter a password"; 
      error=true; 
      return false; 
     } 
    else 
     document.getElementById("l_error").innerHTML="";   


    if(cword=="" || cword==null) 
     {    
      document.getElementById("c_error").innerHTML="Please confirm your password"; 
      error=true; 
      return false; 
     } 
    else 
     document.getElementById("c_error").innerHTML="";   

    return true; 

}

kann jemand bitte helfen Ich finde den Fehler.

Quelle

2016-04-01 Kafi Brown

Ihr Formular wird übermittelt, auch wenn Ihre Funktion false zurückgibt.

Wechsel:

onsubmit="validateForm();"

zu:

onsubmit="return validateForm();"

Dies sollte es beheben.

Quelle

2016-04-01 23:48:36 NerdyGeek

Vielen Dank. Das hat geholfen !! –

Yay, ich bin froh, dass es geholfen hat! – NerdyGeek

Javascript aktualisiert den Bildschirm

Antwort

Verwandte Themen