表單驗證錯誤信息在JavaScript中覆蓋（僅）

我想驗證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>

來源

2017-11-18 Tiyor

無法複製，可以請你告訴步驟來複制 – brk

@Tiyor你調試你的代碼？如果沒有，請嘗試從[此回答]（https://stackoverflow.com/a/19623573/1575353）或其後的信息 –

您的狀況中有邏輯錯誤。你已經把一個條件，如果（validator.isEmpty（val）），但你試圖檢查它是否有相同的條件內的長度超過2。這就是說，如果你在輸入框中有任何字符，它將不會進入上面的if條件，並且會一直到其他部分。 – Bharat

我花了一段時間，但我希望以下爲你的作品。讓我知道你是否需要幫助來理解任何事情。我覺得你的代碼有點複雜，所以我簡化了它。

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

來源

2017-11-18 06:53:00

謝謝兄弟你的努力 – Tiyor

表單驗證錯誤信息在JavaScript中覆蓋（僅）

回答

相關問題