JavaScript不验证第二次提交请求的表单

Question

我有JavaScript代码，它将验证第一个提交请求上的表单，但如果用户再次点击提交，即使它们没有纠正表单错误，表单也不会处理验证功能，并将提交。

我希望每次用户点击提交按钮时都要执行验证功能。

感谢您的帮助，下面的代码。 马丁

<form action="site.url" method="post" name="signup" onsubmit="return validateForm()"> 
    <label for="firstname"><span id="inactiveErrorFname">Please enter your first name<br></span> 
     First name <strong title="Required" class="required">*</strong></label><br> 
    <input type="text" name="firstName"> 
    <label for="surname"><br><span id="inactiveErrorSname">Please enter your Surname<br></span> 
     Surname</label><input type="text" name="lastName"> 
    <label for="email"> 
     <span id="inactiveErrorEmail"><br>Please enter your Email address<br></span> 
     Email address <strong title="Required" class="required">*</strong></label> 
    <input type="text" name="emailAddress"> 
    <input class="button" type="submit" value="Sign up" />  
</form> 

<script> 

    function validateForm() 
    { 
     var x=document.forms["signup"]["firstName"].value; 
     var y=document.forms["signup"]["lastName"].value; 
     var z=document.forms["signup"]["emailAddress"].value; 
     var atpos=z.indexOf("@"); 
     var fname; 
     var sname; 
     var email; 

     /* Validate first name */ 
     if (x==null || x=="") 
     { 
      document.getElementById("inactiveErrorFname").id = "activeErrorFname"; 
      fname = "true"; 
     } 
     /* Validate Surname */ 
     if (y==null || y=="") 
     { 
      document.getElementById("inactiveErrorSname").id = "activeErrorSname"; 
      sname = "true"; 
     } 
     /* Validate email */ 
     if (atpos<1) 
     { 
      document.getElementById("inactiveErrorEmail").id = "activeErrorEmail"; 
      email = "true"; 
     } 
     if (fname=="true" || sname=="true" || email =="true") 
     { 
      return false; 
     } 
    } 

</script> 

Answer 1

你正面临着由事实创造你正在改变某些元素的ID的问题。你运行你的代码中的第一次，这些语句成功地拼命地跑：

document.getElementById("inactiveErrorFname").id = "activeErrorFname"; 
document.getElementById("inactiveErrorSname").id = "activeErrorSname"; 
document.getElementById("inactiveErrorEmail").id = "activeErroremail"; 

但是这些元素的ID的发生了变化，导致一个事实，即这些语句在unexisting元素调用第二次。这导致了一个javascript致命错误，因此没有return false。您的表单第二次将按照正常情况提交。解决这个问题的方法不是更改id，而是更改错误标签的类。你可以在this fiddle找到一个例子。

HTML：

<form action="#" method="post" name="signup" onsubmit="return validateForm()"> 
    <label for="firstname"> 
     <span class="inactive" id="errorFname">Please enter your first name<br></span> 
     First name <strong title="Required" class="required">*</strong> 
    </label><br> 
    <input type="text" name="firstName"><br><br> 

    <label for="surname"> 
     <span class="inactive" id="errorSname">Please enter your Surname<br></span> 
     Surname 
    </label><br> 
    <input type="text" name="lastName"><br><br> 

    <label for="email"> 
     <span class="inactive" id="errorEmail"><br>Please enter your Email address<br></span> 
     Email address <strong title="Required" class="required">*</strong> 
    </label><br> 
    <input type="text" name="emailAddress"><br><br> 

    <input class="button" type="submit" value="Sign up" />  
</form> 

的Javascript：

function validateForm() 
{ 
    var x=document.forms["signup"]["firstName"].value; 
    var y=document.forms["signup"]["lastName"].value; 
    var z=document.forms["signup"]["emailAddress"].value; 
    var atpos=z.indexOf("@"); 
    var fname; 
    var sname; 
    var email; 

    /* Validate first name */ 
    if (x==null || x=="") 
    { 
     document.getElementById("errorFname").className = "active"; 
     fname = "true"; 
    } 
    /* Validate Surname */ 
    if (y==null || y=="") 
    { 
     document.getElementById("errorSname").className = "active"; 
     sname = "true"; 
    } 
    /* Validate email */ 
    if (atpos<1) 
    { 
     document.getElementById("errorEmail").className = "active"; 
     email = "true"; 
    } 
    if (fname=="true" || sname=="true" || email =="true") 
    { 
     return false; 
    } 
    return false; 
}