表单验证错误消息在javascript中被覆盖（仅）

Question

希望大家都做得很好。

我正在尝试使用Javascript验证表单的名字输入字段。 由于某些原因，错误消息不会按顺序显示。 其中一些优先于其他错误，仅显示一条错误消息，其余则不显示。

我想知道为什么吗？ 谁能给我一些启示？

这是我的代码：

 // Predefined validator function to check if input is empty or not var validator = {}; validator.isEmpty = function(input) { // Stop execution if input isn't string if (typeof input !== 'string') return false; if (input.length !== 0) { for (var i = 0; i < input.length; i++) { if (input[i] !== " ") { return false; } return true; } } return true; }; validator.isEmpty(null); // returns false // Main part to get inputs and apply validation window.onload = function() { var signUp = document.getElementById("signUp"); var fName = document.getElementById("fName"); var suButton = document.getElementById("subMit"); // Submit button on the function suButton.addEventListener('click', function(event) { isNameValid(fName); }); signUp.addEventListener('submit', function(event) { event.preventDefault(); }); function isNameValid(char) { var val = char.value; if (validator.isEmpty(val)) { if (val.length < 2) { // Display a message if input length is less than 2 char.setCustomValidity("We expect your input should contain at least 2 characters, darling !"); char.style.borderColor = "red"; } if(!isNaN(val)) { char.setCustomValidity("Please, enter only characters"); char.style.borderColor = "red"; } } else { char.setCustomValidity(""); char.style.borderColor = "green"; } } 

 <form id="signUp"> <input type="text" id="fName" name="firstname" placeholder="First name"> <input type="checkbox" name="result" required autofocus> Agree our conditions <input type="submit" id='subMit' value="SUBMIT"> </form> 

Answer 1

我花了一段时间，但我希望以下对您有用。 让我知道您是否需要帮助以了解任何内容。 我觉得您的代码有点复杂，所以我简化了它。

<script>
function submitForm(){
var formValid = false;
var msg = "";
var fNameElement = document.getElementById("fName");
if(fNameElement){
  var fNameValue = fNameElement.value;
  if(fNameValue.length < 2){
    msg = "We expect your input should contain at least 2 characters, darling !";
  }
  else if(!(/^[a-zA-Z]+$/.test(fNameValue))){
    msg = "Please, enter only characters";
  }
  else{
    formValid = true;
  }
  if(formValid){
    fNameElement.style.borderColor="green";
    //do something
  }
  else{
    fNameElement.style.borderColor="red";
    alert(msg); // or show it in a div
  }
}
}
</script>
<form id="signUp" action="javascript:submitForm()">
    <input type="text" id="fName" name="firstname" placeholder="First name"> 
    <input type="checkbox" name="result"  required  autofocus> Agree our conditions
    <input type="submit" id='subMit' value="SUBMIT">
 </form>

小提琴： https : //jsfiddle.net/fxumcL3d/3/