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>

尝试使用浏览器中的控制台进行相同的调试。

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

Javascript表单验证没有提交提醒

3 个答案: