Question

我正在使用它来验证我的表单，以便显示任何留空的字段。我收到消息，但它会立即重新启动页面。

HTML代码：

<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代码：

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;

}

有人可以帮我找到错误。

Answer 1

即使您的函数返回false，您的表单也会被提交。

变化：

onsubmit="validateForm();"

为：

onsubmit="return validateForm();"

这应该解决它。

javascript不断刷新屏幕

1 个答案: