时间戳

首页 > 解决方案 > 省略提交按钮时表单数据验证不起作用

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

问题描述

到目前为止，这是一段 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>

标签： javascriptvalidation

解决方案

如果你不使用它，你想使用 submit 事件或 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>

推荐阅读