更改文本框的顏色並在Javascript驗證中添加文本

所以我試圖驗證窗體，並且當驗證失敗時我無法獲得文本框更改。相反，表單會完成。我想要的是，如果驗證失敗，文本框邊框會變成紅色，並且文本框會顯示爲「填充此字段！」的文本框。更改文本框的顏色並在Javascript驗證中添加文本

這就是我剛纔寫了測試的目的和它不工作，我不知道如何添加有關箱剛過紅色=彩色文本：

<form id="reg" method="POST" action="user.php" onsubmit="return validate()"> 

    <label for="first">First Name: </label> 
    <input id="first" name="first" type="text" value=""> 

    <button type="submit">Register</button> 
</form> 


function validate(){ 
    var formIsValid = true; 

    if(first.value === ""){ 
     //Not sure how to add Red-Colored Text below the box which says "Fill our this field!" 
     first.borderColor = "red"; //NOT WORKING 
     formIsValid = false;  
    } 

    return formIsValid; 

}

來源

2013-11-09 Please Delete me

您是否遺漏了''您的功能標籤？ – Graham

@Graham否該函數位於外部JavaScript文件中，並且在HTML頭中調用它 –

看起來您正在嘗試引用元素的標識而不使用document.getElementById函數。而不是引用「第一個」引用document.getElementById（「第一個」）。 –

我相信這是你正在尋找，

http://jsfiddle.net/F8H7Y/

<form name= "reg" id="reg" method="POST" action="user.php" onsubmit="return validate()"> 

    <label for="first">First Name: </label> 
    <input id="first" name="first" type="text" value=""> 

    <input type="submit">Register</button> 
</form> 



function validate(){ 
    var formIsValid = true; 
    var first=document.forms["reg"]["first"]; 
    if(first.value == null || first.value == ""){ 
     first.style.borderColor = "red"; 
     formIsValid = false;  
    } 

    return formIsValid; 

}

來源

2013-11-09 19:16:47 v2b

爲什麼要使用var first = document.forms [「reg」] [「first」]; INSTEAD OF var first = document.getElementById（「first」），現在它工作的很完美。我認爲歌劇需要||因某種原因工作，我不知道。我最後一個問題是，如何讓文本出現在文本框的下方，該文本說「填充此文本框，這很重要！」？謝謝:) –

document.getElementById很好。兩者都會產生同樣的結果。至於錯誤味精，您可以添加另一個隱藏的div，並使其在驗證失敗時可見。或者你可以使用相同的「第一個」並在其上設置一個值。看@ http://jsfiddle.net/F8H7Y/1/ – v2b

我試過這個，它很棒。我設法創建一個新的div，將一個段落附加到div並根據錯誤將特定的錯誤消息附加到段落。所以我只是做了一個錯誤函數，但是當我繼續點擊按鈕時，它會一直創建一個節點，這是一件壞事。它也打破了我美麗的HTML頁面，我不知道如何設計它。如果你能向我展示一個例子，我將不勝感激。感謝您的幫助:) –

Have a look on this post

我認爲對於文本，您可以使用空的標籤使文本出現在文本框下方，在驗證失敗時顯示「填充此文本框」。

來源

2013-11-09 20:20:24

展望它:)謝謝 –

更改文本框的顏色並在Javascript驗證中添加文本

回答

相關問題