Form data validation not working when omitting a submit button

Question

As of right now, this is a little test piece of Javascript in which you input some values into a form, and then calculate some values based on them. Values are not read directly from the form, but rather from a set of global variables which are updated using the load params button.

What's bugging (literally) me is that in my form, the input attribute type="number" seems to be being ignored. When I add a submit button to the end of the form (a button that I don't really want), the form works as expected - it blocks me from typing in anything other than numeric characters. However, when I remove this submit button, it doesn't seem to be doing this input validation.

Any idea why?

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>

score 0 · Answer 1 · answered Oct 11 '19 at 16:46

You want to use the submit event or preventDefault if you do not use it

You can try this

I removed the novalidate to make the fields required.

I also remove the submit from the 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>

Thanks for the solution. Out of interest, why is it that omitting the submit button specifically means that input validation isn't performed? I'm not sure if it's just the way that I'm thinking about this that is wrong. Putting in a submit button and then just never clicking it makes the code behave exactly as I'm looking for. I'd just rather be able to do that, but without the random submit button! — William W, Oct 11 '19 at 17:16
You can execute the validation without but you will have to call it yourself https://stackoverflow.com/questions/18634106/manually-trigger-html5-validation-on-button-click — mplungjan, Oct 11 '19 at 17:19

EternalHour · Answer 2 · 2019-10-11T18:49:10.750

Seems you don't need to submit the form in the first place? You could get the input values without the submit using your existing code. What about this?

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>

Form data validation not working when omitting a submit button

2 Answers2