Javascript and HTML validation

Javascript and HTML validation

本文关键字：validation HTML and Javascript      更新时间：2023-09-26

在我的代码中，当用户不满足每个字段的要求时，我试图显示"必需"的span文本。但它不起作用。这个怎么了？

function validate() {
  var spans = document.getElementsByTagName("span");
  var fname = document.registration.fname;
  if (fname.value === "") {
    spans[0].style.visibility = "visible";
  } else {
    spans[0].setAttribute("style", "visibility:hidden");
  }
}
<form name='registration' align='center'>
  <fieldset name='registration' class='fieldset-auto-width'>
    <div>
      <label for='fname'><b>FirstName:</b>
      </label>
      <input type='text' name='fname' placeholder='Enter First Name' value='' required='required' />
      <span id='errfn' class='error'> required</span>
    </div>
    <input type='button' value='Submit' onclick='validate();' />
  </fieldset>
</form>

我发现了我的问题。我还没有提供我的全部代码，这就是为什么你们中的一些人感到困惑。

它没有出现的原因是我的头上还有一个跨度。在我的javascript代码中，我将span声明为一个数组。因此，我头上的span就是span[0]索引。名字下面的跨度是span[1]。

感谢您的帮助：）

为什么不先将其初始化为隐藏？您只需将其初始化为隐藏，如果用户没有正确设置，则将其设置为可见。

function validate() {
  var spans = document.getElementsByTagName("span");
  var fname = document.registration.fname;
  if (fname.value === "") {
    spans[0].style.visibility = "visible";
  }else{
    spans[0].style.visibility = "hidden";
  }
}
<form name='registration' align='center'>
  <fieldset name='registration' class='fieldset-auto-width'>
    <div>
      <label for='fname'><b>FirstName:</b>
      </label>
      <input type='text' name='fname' placeholder='Enter First Name' value='' required='required' />
      <span id='errfn' class='error' style="visibility:hidden"> required</span>
    </div>
    <input type='button' value='Submit' onclick='validate();' />
  </fieldset>
</form>

相关文章：