Javascript 表单验证提交时没有提示

Question

我正在尝试在提交之前验证我的表单，但无论如何提交表单都没有出现任何警报，即使提交的表单是空白的。单击提交按钮后，我想确保信息已完成且正确无误，当它为空白或不正确时，应在不提交表单的情况下出现警告。

谢谢

HTML

<!DOCTYPE html>
<html>
<head>
<title>Oaktown Football Club</title>
<meta charset="UTF-8">
<script src="formValidation.js"></script>
</head>
<body>
<header>
    <img src="logo.png" alt="Oaktown Football Club Logo"/>
    <h1>Oaktown Football Club</h1>
<nav>
<a href="Index.html">Homepage</a>
<a href="Competitions.html">Competitions</a>
<a href="Contact.html">Contact</a>
</nav>
</header>
<section>
    <h2>Contact Us</h2>
<article>
    <h3>Secretary</h3>
    <p>Name: Laci Tanner</p>
    <p>Phone: (02) 6620 3324</p>
    <p>Email: <a href="mailto:secretary@oaktownfa.com.au">secretary@oaktownfa.com.au</a></p>
<h3>Leave us a message</h3>
<form method="post" action="actionPage.html" name="contactForm" onsubmit="return formValidation();">
<label>Full Name:</label><br>
<input type="text" size="35" name="fullName" id="name"><br>
<br><label>Email:</label><br>
<input type="text" size="35" name="email" id="email"><br>
<br><label>Phone:</label><br>
<input type="text" size="35" name="phone" id="phone"><br>
<br><label>Team:</label><br>
<select name="team"><br>
<option>Please Choose</option>
<option>Adults</option>
<option>Under 12s</option>
<option>Under 6s</option>
</select><br>
<br><label>I am:</label><br>
<select name="Member"><br>
<option>Please Choose</option>
<option>Thinking about joining the club</option>
<option>Already a club member</option>
</select><br>
<br><label>Comments:</label><br>
<textarea id="comments" type="text" rows="5" cols="75"></textarea><br>
<br><input id="submit" type="submit" value="Submit"><br>
<br><input type="reset">
</form>
</article>
</section>
<footer>
<p>Copyright - Oaktown Football Club</p>
</footer>
</body>
</html>

JavaScript

function formValidation()
{
    var name = document.contactForm.fullName;
    var email = document.contactForm.email;
    var phone = document.contactForm.phone;
    var comment = document.contactForm.comment;

if (fullName.value == "") {
  alert("Please enter your name!");
  fullName.focus();
  return false;
}

if (email.value == "") {
  alert("Please enter your email address!");
  email.focus();
  return false;
}

if (email.value.indexOf("@", 0) < 0) {
  alert("Please enter a valid email address!");
  email.focus();
  return false;
}

if (email.value.indexOf(".", 0) < 0) {
  alert("Please enter a valid email address!");
  email.focus();
  return false;
}

if (phone.value == "") {
  alert("Please enter your phone number!");
  phone.focus();
  return false;
}

if (phone.length < 2) {
  alert("Please enter a valid phone number!");
  phone.focus();
  return false;
}

if (comments.value == "") {
  alert("Please leave us a comment!");
  comments.focus();
  return false;
}
      {
    return true;
}
}

Answer 1

您似乎已将“全名”的值存储在变量 'name' 中，但您正在检查第一个“” if' 块，您正在检查 if "fullName.value == ''".

因此，抛出了“引用错误”。将其更正为 if "name.value == ''" 后，代码工作正常。

请在下方找到 JSBin 中的工作代码：- http://jsbin.com/kemokijucu/edit?html,js,console,output

Answer 2

你得到名字 :

var name = document.contactForm.fullName;

但是通过 fullName 检查：

if (fullName.value == "") {
  alert("Please enter your name!");
  fullName.focus();
  return false;
}

请上代码:)

Answer 3

您在从表单中获取和使用 name 元素时犯了错误。下面是JS中的更正。

function formValidation() {

  var fullName = document.contactForm.name;
  var email = document.contactForm.email;
  var phone = document.contactForm.phone;
  var comment = document.contactForm.comment;

  if (fullName.value == "") {
    alert("Please enter your name!");
    fullName.focus();
    return false;
  }

  if (email.value == "") {
    alert("Please enter your email address!");
    email.focus();
    return false;
  }

  if (email.value.indexOf("@", 0) < 0) {
    alert("Please enter a valid email address!");
    email.focus();
    return false;
  }

  if (email.value.indexOf(".", 0) < 0) {
    alert("Please enter a valid email address!");
    email.focus();
    return false;
  }

  if (phone.value == "") {
    alert("Please enter your phone number!");
    phone.focus();
    return false;
  }

  if (phone.length < 2) {
    alert("Please enter a valid phone number!");
    phone.focus();
    return false;
  }

  if (comments.value == "") {
    alert("Please leave us a comment!");
    comments.focus();
    return false;
  } {
    return true;
  }
}

<title>

  Oaktown Football Club</title>

<body>
  <header>
    <img src="logo.png" alt="Oaktown Football Club Logo" />
    <h1>Oaktown Football Club</h1>
    <nav>
      <a href="Index.html">Homepage</a>
      <a href="Competitions.html">Competitions</a>
      <a href="Contact.html">Contact</a>
    </nav>
  </header>
  <section>
    <h2>Contact Us</h2>
    <article>
      <h3>Secretary</h3>
      <p>Name: Laci Tanner</p>
      <p>Phone: (02) 6620 3324</p>
      <p>Email: <a href="mailto:secretary@oaktownfa.com.au">secretary@oaktownfa.com.au</a></p>
      <h3>Leave us a message</h3>
      <form method="post" action="actionPage.html" name="contactForm" onsubmit="return formValidation();">
        <label>Full Name:</label>
        <br>
        <input type="text" size="35" name="fullName" id="name">
        <br>
        <br>
        <label>Email:</label>
        <br>
        <input type="text" size="35" name="email" id="email">
        <br>
        <br>
        <label>Phone:</label>
        <br>
        <input type="text" size="35" name="phone" id="phone">
        <br>
        <br>
        <label>Team:</label>
        <br>
        <select name="team">
          <br>
          <option>Please Choose</option>
          <option>Adults</option>
          <option>Under 12s</option>
          <option>Under 6s</option>
        </select>
        <br>
        <br>
        <label>I am:</label>
        <br>
        <select name="Member">
          <br>
          <option>Please Choose</option>
          <option>Thinking about joining the club</option>
          <option>Already a club member</option>
        </select>
        <br>
        <br>
        <label>Comments:</label>
        <br>
        <textarea id="comments" type="text" rows="5" cols="75"></textarea>
        <br>
        <br>
        <input id="submit" type="submit" value="Submit">
        <br>
        <br>
        <input type="reset">
      </form>
    </article>
  </section>
  <footer>
    <p>Copyright - Oaktown Football Club</p>
  </footer>
</body>

尝试在浏览器中使用控制台进行调试。

您可以将电子邮件字段的类型属性更改为 email，以便在该字段上自动验证电子邮件。

Javascript 表单验证提交时没有提示

Javascript form validation no alert on submit

javascript

forms

validation

onsubmit