如何在JavaScript中執行一次循環以顯示所有錯誤？

Question

我目前正在研究JavaScript表單驗證。 對於個人，它正在應用所有錯誤，但是我的任務是立即循環所有元素並立即顯示錯誤。 有什么解決辦法。

<form action="" id="register" onsubmit="return validation()">
  Name<input type="text" id="name">
  <p id="error"></p>
  Email<input type="text" id="email">
  <p id="error"></p>
  Password<input type="text" id="password">
  <p id="error"></p>
  <input type="submit" name="submit" value="Submit">
</form>
<script>
  function validation() {
    if (document.getElementById('name').value=="") {
      document.getElementById("error").innerHTML="Please fill your name";
    }
    and so.. on..
  }
</script>

有人可以幫助我如何在用戶單擊“提交”按鈕時立即循環顯示所有錯誤嗎？

Answer 1

首先，創建一個錯誤框 。 可以使用簡單的div完成。

<div id="error-box" style="color: red"></div>

其次，您不需要鏈接無限的if語句。 您可以使用夢幻般的for循環！

function validation() {
  var inputs = document.forms['myForm'].getElementsByTagName('input').length;

  for (i = 0; i <= inputs; i++) {
    if (document.forms['myForm'][i].value == "") {
        document.getElementById("error-box").innerHTML="Please fill " + document.forms['myForm'][i].name;
    }
  }
}

這將創建一個輸入數組，並逐一讀取。 如果任何字段為空，它將在您的錯誤框中返回錯誤。 如果不是，則繼續執行。

或者您可以使用jQuery和Validation插件。 在這里查看更多信息。 一個簡單的jQuery表單驗證腳本

編碼愉快！

Answer 2

首先， id在同一文檔中應該是唯一的，因此您必須用類替換重復的id ，例如：

 Name<input type="text" id="name">
 <p class="error"></p>

 Email<input type="text" id="email">
 <p class="error"></p>

 Password<input type="text" id="password">
 <p class="error"></p>

然后只需在相關的.error段落中顯示輸入的錯誤消息：

function validation() {
   if ($('#name').val()==="") {
       $('#name').next(".error").html("Please fill your name");
   }
}

希望這可以幫助。

 $('#register').on('submit', function(){ var submit = true; if ($('#country').val()==='-1'){ $('#country').next(".error").html("Please fill your country"); submit = false; }else $('#country').next(".error").html(""); if ($('#name').val()===""){ $('#name').next(".error").html("Please fill your name"); submit = false; }else $('#name').next(".error").html(""); if ($('#email').val()===""){ $('#email').next(".error").html("Please fill your email"); submit = false; }else $('#email').next(".error").html(""); if ($('#password').val()===""){ $('#password').next(".error").html("Please fill your password"); submit = false; }else $('#password').next(".error").html(""); if ($('[name="check"]:checked').length===0){ $('[name="check"]:last').next(".error").html("Please check one at least"); submit = false; }else $('[name="check"]').next(".error").html(""); return submit; }) 

 .error{ color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="" name="register" id="register"> Country <select name="country" id="country"> <option value="-1">Select country please</option> <option value="usa">USA</option> <option value="austriala">Austriala</option> <option value="india">India</option> </select> <p class="error"></p> Name <input type="text" id="name"> <p class="error"></p> Email <input type="text" id="email"> <p class="error"></p> Password <input type="text" id="password"> <p class="error"></p> Checkboxes <br> <input type="checkbox" name="check" value="check_1">check 1 <br> <input type="checkbox" name="check" value="check_2">check 2 <br> <input type="checkbox" name="check" value="check_3">check 3 <p class="error"></p> <input type="submit" name="submit" value="Submit"> </form> 

Answer 3

嗯。 本機方式怎么樣？ :)

function select( cssSelector ){ return document.querySleectorAll( cssSelector ) };

var inputs = select( '#register input' );  // selects array of all child inputs

//setup all validations within an object
var validations = {
   name: function( nameText ){
      //shorthand if-statements, expand if you need to
      return ( nameText === "" ) ? "error, cannot be empty" : "ok";
   },
   password: function( passText ){
      return ( passText.length < 8 )? "too short" : "ok";
   }
};

//iterate over all inputs
for( var elem in inputs ){
   if( validations[ inputs[ elem ].id ] ){ // if validation rule exists..
      console.log( "input nr " + elem + "tested\n" +
      "id = " + inputs[ elem ].id + "\n" + 
      "outcome: " + validations[ inputs[ elem ] ] );
   }
}

我沒有測試過，所以可能會有錯別字