表单验证JavaScript-不显示警报

Form Validation JavaScript - No Alert Appearing

本文关键字：显示 验证 JavaScript- 表单      更新时间：2023-09-26

我在表单的表单验证方面遇到了问题。我四处搜索并尝试了一些方法，但没有找到解决方案。我还在学习JavaScript，所以我确信这是有问题的。下面是我的代码。

HTML

<section>
<p>Please type in your information so I can send you the newsletter.<br>
Required values are marked by an asterisk (*)</p>     
<form id="newsletter" onsubmit="return validateForm()" method "post">
<fieldset id="personal">
    <legend>Personal Information</legend>
<label for="name">Name: *</label>
<input type="text" name="name" id="name" size="40"> 
<br>
<label for="eMail">E-mail Address: *</label>
<input type="text" name="eMail" id="eMail">
<br>
<label for="favBeer">Favorite Beer Style:</label>
<select name="favBeer" id="favBeer">
    <option value="IPA">IPA</option>
    <option value="Saison">Saison</option>
    <option value="Porter">Porter</option>
    <option value="Pilsner">Pilsner</option>
    <option value="Hefeweizen">Hefeweizen</option>
    <option value="Stout">Stout</option>
    <option value="Other">Other</option>
    </select>
<br>
<label for="comments"> Additional Information:<label>
<textarea name="comments" id="comments" cols="55" rows="5"></textarea>  
</fieldset>
</section>

JavaScript

function validateForm() {
    var name = document.getElementById("name");
    if(nameValid(name)){
        return true;
    }
    return false;
}
function nameValid(name) {
    var name_length = name.length;
    if (name_length == "") {
        alert("Name is required");
        name.focus();
        return false;
    }
return ture;
}

有几个问题：

  1. ture应为true
  2. 您没有关闭form标签
  3. 没有submit按钮
  4. 您将字符串的长度与""进行比较，而不是与数字进行比较

但主要的是，你试图取一个input（name）的长度，而不是它的value的长度。

相反：

function validateForm() {
  var name = document.getElementById("name");
  if (nameValid(name)) {
    return true;
  }
  return false;
}
function nameValid(name) {
  var name_length = name.value.length;
  if (name_length == 0) {
    alert("Name is required");
    name.focus();
    return false;
  }
  return true;
}
<section>
  <p>Please type in your information so I can send you the newsletter.
    <br>Required values are marked by an asterisk (*)</p>
  <form id="newsletter" onsubmit="return validateForm()" method "post">
    <fieldset id="personal">
      <legend>Personal Information</legend>
      <label for="name">Name: *</label>
      <input type="text" name="name" id="name" size="40">
      <br>
      <label for="eMail">E-mail Address: *</label>
      <input type="text" name="eMail" id="eMail">
      <br>
      <label for="favBeer">Favorite Beer Style:</label>
      <select name="favBeer" id="favBeer">
        <option value="IPA">IPA</option>
        <option value="Saison">Saison</option>
        <option value="Porter">Porter</option>
        <option value="Pilsner">Pilsner</option>
        <option value="Hefeweizen">Hefeweizen</option>
        <option value="Stout">Stout</option>
        <option value="Other">Other</option>
      </select>
      <br>
      <label for="comments">Additional Information:
        <label>
          <textarea name="comments" id="comments" cols="55" rows="5"></textarea>
    </fieldset>
    <input type="submit">
  </form>
</section>

您需要检查name元素的值，而不仅仅是元素本身。即：

document.getElementById("name").value

您还需要将length正确地作为数值进行比较，如此更新函数中所示：

function nameValid(name) {
    var name_length = name.length;
    alert(name_length);
    if (name_length < 1) {
        alert("Name is required");
        //name.focus();
        return false;
    }
    return true;
}

Fiddle在这里包括一个额外的提醒：http://jsfiddle.net/799vymrz/

（尽管对于正在调试的值，console.log通常比alert更有帮助；您需要查看浏览器控制台才能看到console.log的输出）

相关文章：