フォーム検証エラーメッセージがJavaScriptで上書きされています

Question

うまくいきました。

フォームのfirstname入力フィールドをJavascriptで検証しようとしています。何らかの理由で、エラーメッセージが順番に表示されません。それらのうちのいくつかは他のものを上書きし、ただ1つのエラーメッセージだけが表示され、残りは表示されません。

私はなぜだろうか？誰か私に光をあげてくれますか？ここで

は私のコードです：

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