Reset form invalid values

**Rain Lover** · 04-10-2019, 07:56 AM

Here’s a sample form:

Code:

<form>
  <input type="number">
  <input type="number">
  <button type="button">Reset</button>
</form>

Code:

var form = document.querySelector('form');

function detectChange() {
  var inputs = form.querySelectorAll('input');
  for (var input of inputs) {
    if (input.value) {
      return true;
    }
  }
}

form.querySelector('button').addEventListener('click', function() {
  if (detectChange() && confirm('Are you sure you want to reset?')) {
    form.reset();
  }
});

DEMO

I’d like the reset button to work even if the user enters non-numeric values.

**keyboard** · 04-10-2019, 01:13 PM

It only accepts numbers because in the form in the html the input type is set to number.

Change

HTML Code:

<form>
  <input type="number">
  <input type="number">
  <button type="button">Reset</button>
</form>

to

HTML Code:

<form>
  <input type="text">
  <input type="text">
  <button type="button">Reset</button>
</form>

**Rain Lover** · 04-10-2019, 05:17 PM

Originally Posted by keyboard

It only accepts numbers because in the form in the html the input type is set to number.

Actually you can do it even in Chrome: copy and paste some text into the input fields.

**keyboard** · 04-10-2019, 10:46 PM

Originally Posted by Rain Lover

Actually you can do it even in Chrome: copy and paste some text into the input fields.

Yes, you can input text into the box, but it isn't a valid input (I'm not 100% sure on this, I'm just going off my own testing while I was editing the code you put).

Try running the following code -

HTML Code:

<!DOCTYPE html>
<html>
	<head>

	</head>
	<body>
		<input type="number" id="inputNumber">
		<input type="button" id="inputButton" value="Test">

		<script type="text/javascript">
			document.getElementById("inputButton").onclick = function() {
				var value = document.getElementById("inputNumber").value;
				alert(value);
			};
		</script>

	</body>
</html>

If you enter a number into the input it alerts the number. If you enter text or a combination of text and numbers, the alert is empty. The other difference in chrome is that it adds a little increment and decrement arrow to the input field. On mobile it gives you a keypad to enter a number instead of the default keyboard.
Attachment 6340

So the reason your original code wasn't working was this line

Code:

if (input.value) {
      return true;
    }

If you enter a string into the number input then input.value is empty and so the detectChange doesn't return true.
If you change it to a text input, that won't be a problem.

Thread: Reset form invalid values

Thread Tools

Search Thread

Reset form invalid values

Similar Threads

Form onreset Event after the form reset

Invalid eMail Address(check) with PHP Script Form

newsletter subscribe form - always invalid - regexp

Pass Multiple Values - Reset/Clear Textarea

reset form please help

Bookmarks

Bookmarks

Posting Permissions