如果輸入值只是空白，則不會出現錯誤消息

如果input值爲空，當我點擊submit按鈕時，我的JS函數返回false。但是，如果input只是空白區域" "它仍然會返回false，但錯誤消息和input text border color不會像輸入值爲空時顯示的那樣顯示""。如果輸入值只是空白，則不會出現錯誤消息

HTML

<form> 
    <input id="textbox" type="text" required/> 
    <input type="submit" id="btnSubmit" value="Save" /> 
</form>

的JavaScript

var input = document.getElementById("textbox").value.trim(); 

if (input.length == 0) { 

    return false; 
}

來源

2016-10-25 Del boy

怎麼辦你觸發你的javascrip T'哪裏改變顏色的代碼等？ – Liam

@JonasGrumann這是沒有意義的 - 它已經被修剪，無論如何你正在運行一個數字（輸入字符串的長度）的replace（）！ – moopet

請注意，如果您要包含可運行的代碼段，請在發佈前運行它以確保其正常工作。 –

你需要使用「模式」屬性，並指定至少一個字符正則表達式表達。

嘗試

<input id="textbox" type="text" pattern="^\d*[a-zA-Z][a-zA-Z0-9]*$" required/>

上面的圖案

零個或多個ASCII數字
一個字母ASCII字符
零個或多個字母數字ASCII字符

來源

2016-10-25 14:18:56

你沒有真正做驗證。首次驗證是在您使用HTML5 required屬性時進行的。所以你實際上並沒有使用JS代碼。我覺得這是你想達到什麼目的：

function checkInput(){ 
 
    var input = document.getElementById("textbox").value; 
 
    if (input === '') { 
 
     document.getElementById('error_message').style.display = 'block'; 
 
     document.getElementById('textbox').style.borderColor = '#F00'; 
 
     return false; 
 
    }else{ 
 
     document.getElementById('error_message').style.display = 'none'; 
 
     document.getElementById('textbox').style.borderColor = '#000'; 
 
    } 
 
}

#error_message{ 
 
    display: none; 
 
}

<form method='post'> 
 
    <input id="textbox" type="text"/> 
 
    <input type="submit" id="btnSubmit" value="Save" onclick='checkInput();'/> 
 
    <p id='error_message'> 
 
    error message 
 
    </p> 
 
</form>

來源

2016-10-25 14:17:54 Ionut

如果輸入值只是空白，則不會出現錯誤消息

回答

相關問題