0

有谁知道为什么这个简单的 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;
}
4

2 回答 2

1

没有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;
}
于 2013-06-19T20:53:40.773 回答
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>
于 2013-06-19T21:07:21.770 回答