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

希望你们都做得很好

我试图用Javascript验证表单的firstname输入字段。由于某些原因，错误消息没有按顺序显示。其中一些错误会覆盖其他错误，仅显示一条错误消息，其余的则不会

我想知道为什么？谁能给我点光吗

这是我的密码：

//用于检查输入是否为空的预定义验证程序函数
var验证程序={}；
validator.isEmpty=函数（输入）{
//如果输入不是字符串，则停止执行
如果（输入类型！=='string'）返回false；
如果（input.length！==0）{
对于（变量i=0；i

同意我们的条件

我花了一些时间，但我希望下面的内容对您有用。如果您需要帮助理解任何内容，请告诉我。我觉得您的代码有点复杂，所以我简化了它

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

函数submitForm（）{
var formValid=false；
var msg=“”；
var fNameElement=document.getElementById（“fName”）；
if（fnamelement）{
var fNameValue=fNameElement.value；
如果（fNameValue.length<2）{
msg=“亲爱的，我们希望您的输入至少包含2个字符！”；
}
else if（！（/^[a-zA-Z]+$/.test（fNameValue）））{
msg=“请只输入字符”；
}
否则{
formValid=true；
}
如果（格式有效）{
fNameElement.style.borderColor=“绿色”；
//做点什么
}
否则{
fNameElement.style.borderColor=“红色”；
警报（msg）；//或在div中显示
}
}
}
同意我们的条件

---

Fiddle:

我花了一段时间，但我希望下面的内容对您有用。如果您需要帮助了解任何内容，请告诉我。我觉得您的代码有点复杂，所以我简化了它

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

函数submitForm（）{
var formValid=false；
var msg=“”；
var fNameElement=document.getElementById（“fName”）；
if（fnamelement）{
var fNameValue=fNameElement.value；
如果（fNameValue.length<2）{
msg=“亲爱的，我们希望您的输入至少包含2个字符！”；
}
else if（！（/^[a-zA-Z]+$/.test（fNameValue）））{
msg=“请只输入字符”；
}
否则{
formValid=true；
}
如果（格式有效）{
fNameElement.style.borderColor=“绿色”；
//做点什么
}
否则{
fNameElement.style.borderColor=“红色”；
警报（msg）；//或在div中显示
}
}
}
同意我们的条件

---

Fiddle:

无法复制，请告诉我复制的步骤好吗replicate@Tiyor你调试过你的代码吗？如果没有，请尝试下面的信息，如果你的条件中有逻辑错误，请尝试下面的信息。你已经设置了一个条件If（validator.isEmpty（val））但是，你要检查它在相同条件下的长度是否超过2。也就是说，如果输入框中有任何字符，它将不会输入上面的if条件，并且将始终转到它的其他部分。@Bharat，有意义。谢谢你的时间无法复制，请告诉我要复制的步骤好吗replicate@Tiyor你有黛布吗ugged您的代码？如果没有，请尝试以下信息或之后的信息。您的条件中存在逻辑错误。您已设置了条件If（validator.isEmpty（val））但是，你要检查它在相同条件下的长度是否超过2。也就是说，如果输入框中有任何字符，它将不会进入上面的if条件，并且将始终转到它的其他部分。@Bharat，有意义。谢谢你的时间谢谢你的兄弟谢谢你的努力谢谢你的兄弟谢谢你的努力