省略提交按钮时表单数据验证不起作用答案

【问题标题】：Form data validation not working when omitting a submit button省略提交按钮时表单数据验证不起作用
【发布时间】：2019-10-11 16:38:03
【问题描述】：

到目前为止，这是一个 Javascript 的小测试片段，您可以在其中将一些值输入到表单中，然后根据它们计算一些值。值不是直接从表单中读取的，而是从使用加载参数按钮更新的一组全局变量中读取的。

困扰我（字面意思）的是，在我的表单中，输入属性type="number" 似乎被忽略了。当我在表单末尾添加一个提交按钮（我并不真正想要的按钮）时，表单会按预期工作 - 它阻止我输入除数字字符之外的任何内容。但是，当我删除此提交按钮时，它似乎并没有进行此输入验证。

知道为什么吗？

var params = {
  a: 0,
  b: 0,
  c: 0
}

function parse_inputs() {
  document.forms["input_parameters"].submit();
  params["a"] = parseFloat(document.getElementById("input_parameters").a_in.value);
  params["b"] = parseFloat(document.getElementById("input_parameters").b_in.value);
  params["c"] = parseFloat(document.getElementById("input_parameters").c_in.value);
}

function write_params() {
  var text = ""
  for (var param in params) {
    text += params[param] + "<br>"
  }
  document.getElementById("demo").innerHTML = text;
}

function calc_sum() {
  var sum = 0
  for (var param in params) {
    sum += params[param]
  }
  document.getElementById("demo").innerHTML = sum;
}

<h2>CLT Calculator</h2>
<form id="input_parameters" autocomplete="off" novalidate="false">
  <fieldset>
    <legend>Input parameters</legend><br> a: <input type="number" step="0.1" name="a_in" placeholder="0" required><br> b: <input type="number" step="0.1" name="b_in" placeholder="0" required><br> c: <input type="number" step="0.1" name="c_in" placeholder="0"
      required><br><br>
  </fieldset>
</form>
<br>
<button onclick="parse_inputs()">Load params</button><br>
<button onclick="write_params()">Stored params</button><br>
<button onclick="calc_sum()">Calculate sum</button><br>
<p id="demo"></p>

【问题讨论】：

标签： javascript validation

【解决方案1】：

如果你不使用它，你想使用提交事件或preventDefault

你可以试试这个

我删除了 novalidate 以使字段成为必填项。

我还从 parseinputs 中删除了提交

var params = {
  a: 0,
  b: 0,
  c: 0
}

function parse_inputs() {
  params["a"] = parseFloat(document.getElementById("input_parameters").a_in.value);
  params["b"] = parseFloat(document.getElementById("input_parameters").b_in.value);
  params["c"] = parseFloat(document.getElementById("input_parameters").c_in.value);
}

function write_params() {
  var text = ""
  for (var param in params) {
    text += params[param] + "<br>"
  }
  document.getElementById("demo").innerHTML = text;
}

window.addEventListener("load", function() {
  document.getElementById("input_parameters").addEventListener("submit", function(e) {
    e.preventDefault();
    var sum = 0
    for (var param in params) {
      sum += params[param]
    }
    document.getElementById("demo").innerHTML = sum;
  });
});

<h2>CLT Calculator</h2>
<form id="input_parameters" autocomplete="off">
  <fieldset>
    <legend>Input parameters</legend><br> 
    a: <input type="number" step="0.1" name="a_in" placeholder="0" required><br> 
    b: <input type="number" step="0.1" name="b_in" placeholder="0" required><br> 
    c: <input type="number" step="0.1" name="c_in" placeholder="0" required><br><br>
  </fieldset>
  <br>
  <button type="button" onclick="parse_inputs()">Load params</button><br>
  <button type="button" onclick="write_params()">Stored params</button><br>
  <button type="submit">Calculate sum</button><br>
</form>

<p id="demo"></p>

【讨论】：

感谢您的解决方案。出于兴趣，为什么省略提交按钮特别意味着不执行输入验证？我不确定这是否只是我思考这个问题的方式是错误的。放入一个提交按钮，然后从不单击它，使代码的行为完全符合我的要求。我宁愿能够做到这一点，但没有随机提交按钮！
您可以不执行验证，但您必须自己调用它stackoverflow.com/questions/18634106/…

【解决方案2】：

您似乎不需要首先提交表单？您可以使用现有代码在没有 submit 的情况下获取 input 值。这个呢？

var params = {
  a: 0,
  b: 0,
  c: 0
}

var output = document.getElementById("demo");

function parse_inputs() {
  params.a = parseFloat(document.getElementById("input_parameters").a_in.value);
  params.b = parseFloat(document.getElementById("input_parameters").b_in.value);
  params.c = parseFloat(document.getElementById("input_parameters").c_in.value);

  output.textContent = "Params loaded!";
}

function write_params() {
  var text = ""
  for (var param in params) {
    text += params[param] + "<br>"
  }
  output.innerHTML = text;
}

function calc_sum() {
  var sum = 0
  for (var param in params) {
    sum += params[param]
  }
  output.textContent = sum;
}

<h2>CLT Calculator</h2>
<form id="input_parameters">
  <fieldset>
    <legend>Input parameters</legend><br> a: <input type="number" step="0.1" name="a_in" placeholder="0" required><br> b: <input type="number" step="0.1" name="b_in" placeholder="0" required><br> c: <input type="number" step="0.1" name="c_in" placeholder="0"
      required><br><br>
  </fieldset>
</form>
<br>
<button onclick="parse_inputs()">Load params</button><br>
<button onclick="write_params()">Stored params</button><br>
<button onclick="calc_sum()">Calculate sum</button><br>
<p id="demo"></p>

【讨论】：