javascript - シンプルな Javascript フォーム検証コードの問題

Question

基本的に、フォームの検証に使用するコードを書き込もうとしていますが、これはまったく初めてですが、うまく管理できていると思いますか? 私の問題は基本的にこれです。フォームにある 3 つの入力に対して 3 つの検証メソッドを作成しましたが、3 つのメソッドすべてを 1 つのボタン クリックに追加する方法がよくわかりません。

これまでの私のコードは次のとおりです。

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

また、個々の関数からすべての検証メソッドを削除しようとしましたが、それらを 1 つの関数にまとめましたが、これも機能しませんか? 誰かが私が間違っている場所に光を当てることができれば、それは素晴らしいことです! 事前に乾杯！

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

addEventListeneroldIE と同様のメソッドを調べることができます。