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의 변화하는 사실에 의해 생성 직면하고있는 문제. 당신이 당신의 코드를 실행할 처음으로,이 문이 성공적으로 runned됩니다

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

이러한 요소의 id의이 문은 unexisting 요소에 전화를한다는 사실의 결과로 변경된 그러나 두 번째 시간입니다. 이로 인해 결과가 no return false 인 javascript 치명적인 오류가 발생합니다. 두 번째로 양식이 정상적으로 제출됩니다. 이 문제에 대한 해결책은 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> 

자바 스크립트 :

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; 
}