간단한 자바 스크립트 양식 유효성 검사 코드 문제

Question

기본적으로 양식 유효성 검사에 사용할 코드를 작성하려고합니다. 꽤 새로 운 임에도 불구하고 생각하고 있습니다. 내 문제는 기본적 으로이, 3 양식에 3 입력에 대한 3 가지 유효성 검사 방법을 만들었지 만, 내가 어떻게 한 번의 클릭으로 모든 3 가지 방법을 추가하는 방법에 대한 확실하지 않은 메신저?

내 코드는 지금까지 있습니다 :

function validation() { 
    function validateName() { 
    console.log("reaching here"); 

    var name = document.getElementById("full_name"); 

    if (name.value.length == 0) { 
     document.getElementById("okName").className = "fail"; 
    }else{ 
     document.getElementById("okName").className = "success"; 
    } 
    }//End of validate name 

    function validateEmail() { 
    var email = document.getElementById("email"); 

    if (email.value.length == 0) { 
     document.getElementById("okEmail").className = "fail"; 
    }else{ 
     document.getElementById("okEmail").className = "success"; 
    } 
    }//end of validate email 

    function validatePhone() { 
    var phone = document.getElementById("phone"); 

    if (phone.value.length == 0) { 
     document.getElementById("okPhone").className = "fail"; 
    }else{ 
     document.getElementById("okPhone").className = "success"; 
    } 
    }//End of validate phone 
}//End of validation function 

나는 개별 기능의 모든 검증 방법을 제거 시도하고 하나의 단일 fnction에서 그들을했지만,이 중 하나가 작동을 wouldnt? 누군가가 잘못되면 어디에서 빛을 발할 수 있다면 좋을 것입니다! 미리 환호!

Answer 1

은 제출 버튼에 onclick() 이벤트를 부착하는 것을 시도하십시오 -이 늘 검증의 두 번째 단계에 도달 몇 가지 이유를 들어 http://jsfiddle.net/zWrUM/

<button onclick="validation();">validate</button> 

<script> 
function validation() { 
    var name = document.getElementById("full_name"); 
    if (name.value.length == 0) { 
     document.getElementById("okName").className = "fail"; 
     alert("error 1"); 
     return false; 
    }else{ 
     document.getElementById("okName").className = "success"; 
    } 

    var email = document.getElementById("email"); 
    if (email.value.length == 0) { 
     document.getElementById("okEmail").className = "fail"; 
     alert("error 2"); 
     return false; 
    }else{ 
     document.getElementById("okEmail").className = "success"; 
    } 

    var phone = document.getElementById("phone"); 
    if (phone.value.length == 0) { 
     document.getElementById("okPhone").className = "fail"; 
     alert("error 3"); 
     return false; 
    }else{ 
     document.getElementById("okPhone").className = "success"; 
    } 

    alert("success") 
}//End of validation function 
</script> 

Answer 2

addEventListener과 oldIE 비슷한 방법을 살펴볼 수 있습니다.