Question

有谁知道为什么这个简单的JavaScript无效？它应该从display：none更改类“t1”的css来显示：内联使它在输入为空时出现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

没有document.getElementByClassName。你的意思是，getElementsByClassName？您还应该直接设置display样式，而不是通过style属性。此外，如果您需要取消表单提交，则必须在提交时返回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;
}

Answer 2

建议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>

javascript简单验证不起作用？

2 个答案: