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>