JavaScript簡單驗證不工作？

Question

沒有人知道爲什麼這個簡單的JavaScript不工作？ 它應該將類「t1」的css從display：none更改爲display：inline，以便在輸入爲空時顯示onSubmit

我只是不明白爲什麼它不起作用？

謝謝你這麼多，如果你能找到問題的所在（順便說一句，我想記住這純JavaScript）

的Javascript：

function validate() { 

if(document.quote.firstname.value == "") 

{document.getElementByClassName('t1').style = 'display: inline;'; 
    } 

} 

HTML：

<form name="quote" method="post" action="" onSubmit="validate();"> 

<fieldset> 
<legend>Contact Information</legend> 

<div> 
<label>*First Name:</label><span class="t1">Please enter your name</span> 
<input name="firstname" type="text"/> 
</div> 

</fieldset> 

<div id="f-submit"> 
<input name="Submit" value="Submit" type="submit"/> 
</div> 

</form> 

CSS ：

.t1{ 
display: none; 
font-size:13px; 
color: #F33; 
text-align: right; 
} 

Answer 1

建議1：放入標籤ID屬性，以便您可以訪問他們更容易

建議2：請onsubmit屬性是onsubmit="return validate()"

建議3：getElementByClassName不存在。 getElementsByClassName返回一個數組，所以你必須選擇哪一個，或者循環它們。 IE，document.getElementsByClassName('t1')[0]

建議4：如果您希望表單不提交，您的驗證函數需要返回false，如果提交，則返回true。

的Javascript：

function validate() { 

    if(document.getElementById("firstname").value == "" || document.getElementById("firstname").value == null) 
    { 
    document.getElementsByClassName('t1')[0].setAttribute('style','display: inline;'); 
    return false; 
    } 
    return true; 
} 

HTML：

<form name="quote" method="post" action="" onSubmit="return validate()"> 

<fieldset> 
<legend>Contact Information</legend> 

<div> 
<label>*First Name:</label><span class="t1">Please enter your name</span> 
<input id="firstname" name="firstname" type="text"/> 
</div> 

</fieldset> 

<div id="f-submit"> 
<input name="Submit" value="Submit" type="submit"/> 
</div> 

</form> 

Answer 2

沒有document.getElementByClassName。你的意思是，getElementsByClassName？你也應該直接設置display風格，而不是通過樣式屬性。另外，如果您需要取消表單提交，你必須在提交返回的validate（），當你想取消返回false。我也把它放在小提琴上。

我做了的jsfiddle你還有：http://jsfiddle.net/rgthree/g4ZvA/2/

<form name="quote" method="post" action="" onSubmit="return validate();"> 

JS：

function validate() { 
    if(document.quote.firstname.value == ""){ 
    document.getElementsByClassName('t1')[0].style.display = 'inline'; 
    return false; // Return false will cancel the submit, causing the page to not load the form action action 
    } 
    return true; 
}