HTML 表单输出和验证答案

【问题标题】：HTML Form Output and ValidationHTML 表单输出和验证
【发布时间】：2019-11-25 12:53:02
【问题描述】：

我将 onclickevent 添加到按钮，但它仍然无法正确输出我的表单。

【问题讨论】：

把按钮上的onclick去掉，然后用detailsForm.addEventListener("submit", function(e) { e.preventDefault(); processForm(); });（问题是点击按钮会运行JS代码，然后还要提交表单。由于表单没有action属性，这将有效地重新加载页面）

【解决方案1】：

默认情况下，表单内的按钮的类型为submit，这意味着该按钮在单击时会自动提交表单。

要解决这个问题，最快的方法是将type="button" 属性添加到您的按钮：

function clearErrors() {

  document.getElementById("firstnameError").innerHTML = "";
  document.getElementById("lastnameError").innerHTML = "";
  document.getElementById("usernameError").innerHTML = "";

}

function processForm() {

  clearErrors();

  var output = "";

  if (document.getElementById("firstname").value == "") {
    document.getElementById("firstnameError").innerHTML = "First name required";
  }
  if (document.getElementById("lastname").value == "") {
    document.getElementById("lastnameError").innerHTML = "Last name required";
  }



  output += "The form would submit the following information:"
  output += "\nFirst name: " + document.getElementById("firstname").value;
  output += "\nLast name: " + document.getElementById("lastname").value;


  if (document.getElementById("male").checked == true) {
    output += "\nSex: Male";
  } else {
    output += "\nSex: Female";
  }

  if (document.getElementById("car").checked == true) {
    output += "\nI have a car";
  }

  var education = document.getElementById("education");
  output += "\nEducation: " + education.options[education.selectedIndex].text;

  document.getElementById("output").value = output;

}

<div id="header">
  <h1>HTML Forms</h1>
</div>

<div id="content">

  <form id="detailsForm">

    <p>

      First name&#58;<input type="text" name="firstname" id="firstname" />* <span id="firstnameError"></span><br /> Last name&#58;<input type="text" name="lastname" id="lastname" />* <span id="lastnameError"></span><br /> Username&#58;
      <input type="text" name="username" id="username" />* <span id="usernameError"></span><br /> Male <input type="radio" name="sex" value="male" id="male" /> Female<input type="radio" name="sex" value="female" id="female" checked /> <br /> I have a
      car&#58;<input type="checkbox" name="vehicle" value="Car" id="car" /><br /> Select a Level of Education&#58;<br />
      <select name="education" id="education">
        <option value="Secondary School">Secondary School</option>
        <option value="University">University</option>
      </select> <br />

      <button type="button" onclick="processForm()">Click me</button>


    </p>

    <p>
      <textarea name="output" id="output" rows="10" cols="100"></textarea>
    </p>

  </form>

</div>

【讨论】：

【解决方案2】：

我将您的代码重新创建为 sn-p。它工作正常。

（修改您的代码以在 JS 中添加 eventListener() 而不是在 HTML 中。）

function clearErrors() {
  document.getElementById("firstnameError").innerHTML = "";
  document.getElementById("lastnameError").innerHTML = "";
  document.getElementById("usernameError").innerHTML = "";
}

function processForm() {

  clearErrors();

  var output = "";

  if (document.getElementById("firstname").value == "") {
    document.getElementById("firstnameError").innerHTML = "First name required";
  }
  if (document.getElementById("lastname").value == "") {
    document.getElementById("lastnameError").innerHTML = "Last name required";
  }

  output += "The form would submit the following information:"
  output += "\nFirst name: " + document.getElementById("firstname").value;
  output += "\nLast name: " + document.getElementById("lastname").value;

  if (document.getElementById("male").checked == true) {
    output += "\nSex: Male";
  } else {
    output += "\nSex: Female";
  }

  if (document.getElementById("car").checked == true) {
    output += "\nI have a car";
  }

  var education = document.getElementById("education");
  output += "\nEducation: " + education.options[education.selectedIndex].text;

  document.getElementById("output").value = output;

}

var btnSubmit = document.getElementById('btnSubmit')

btnSubmit.addEventListener('click', function(e) {
  e.preventDefault()
  processForm()
})

<div id="header">
  <h1>HTML Forms</h1>
</div>

<div id="content">
  <form id="detailsForm">
    <p>
      First name&#58;<input type="text" name="firstname" id="firstname" />* <span id="firstnameError"></span><br /> Last name&#58;<input type="text" name="lastname" id="lastname" />* <span id="lastnameError"></span><br /> Username&#58;
      <input type="text" name="username" id="username" />* <span id="usernameError"></span><br /> Male <input type="radio" name="sex" value="male" id="male" /> Female<input type="radio" name="sex" value="female" id="female" checked /> <br /> I have a
      car&#58;
      <input type="checkbox" name="vehicle" value="Car" id="car" /><br /> Select a Level of Education&#58;<br />
      <select name="education" id="education">
        <option value="Secondary School">Secondary School</option>
        <option value="University">University</option>
      </select> <br />

      <button id="btnSubmit">Click me</button>


    </p>

    <p>
      <textarea name="output" id="output" rows="10" cols="100"></textarea>
    </p>

  </form>

</div>

【讨论】：