Question

我的表单上的表单验证遇到了麻烦。我已经四处寻找并尝试了一些但未找到解决方案。我还在学习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;
}

Answer 1

有一些问题：

ture应为true
您未关闭form代码
没有submit按钮
您将字符串的长度与""进行比较，而不是数字。

但主要是，您尝试使用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>

Answer 2

您需要检查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;
}

这里包括一个额外警报：http://jsfiddle.net/799vymrz/

（虽然console.log对于您正在调试的值通常比alert更有帮助;您需要查看浏览器控制台以查看console.log的输出）

表单验证JavaScript - 没有警报出现

2 个答案: