Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Reset form invalid values

Posted by: RainLover Apr 10 2019, 02:57 AM

Here’s a sample form:

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

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();
  }
});


https://jsfiddle.net/Mori/Lpzdrsk1/

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

Posted by: CharlesEF Apr 10 2019, 03:12 AM

Is this actual code? The form HTML has several problems and the javascript code should be surrounded by a <script>...</script> block. The function detectChange() doesn't return false.

Posted by: Christian J Apr 10 2019, 05:37 AM

QUOTE(RainLover @ Apr 10 2019, 09:57 AM) *

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

I recall form fields with invalid values are not passed on to javascript (or submitted). So my guess is that if a user enters a non-numeric value in a "type=number" form field, the field will appear to have no value and "if(input.value)" will not return true.

Posted by: pandy Apr 10 2019, 05:58 AM

I guess a normal reset button is out of the question?

Posted by: RainLover Apr 10 2019, 12:08 PM

QUOTE(CharlesEF @ Apr 10 2019, 03:12 AM) *

The function detectChange() doesn't return false.

Thanks for the answer, but I don't understand what you mean.

Posted by: RainLover Apr 10 2019, 12:12 PM

QUOTE(Christian J @ Apr 10 2019, 05:37 AM) *

I recall form fields with invalid values are not passed on to javascript (or submitted). So my guess is that if a user enters a non-numeric value in a "type=number" form field, the field will appear to have no value and "if(input.value)" will not return true.

Yes, exactly! Any workaround?

Posted by: RainLover Apr 10 2019, 12:15 PM

QUOTE(pandy @ Apr 10 2019, 05:58 AM) *

I guess a normal reset button is out of the question?

QUOTE
You should usually avoid including reset buttons in your forms. They're rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button).

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset

Posted by: Christian J Apr 10 2019, 12:54 PM

QUOTE(RainLover @ Apr 10 2019, 07:15 PM) *

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset

The above applies to all Reset buttons, regardless of how they're made.

QUOTE(RainLover @ Apr 10 2019, 07:12 PM) *

Yes, exactly! Any workaround?

I'd just use an HTML Reset button, if you need one.

Otherwise, why check in the javascript that the number INPUT field has a value? Resetting an empty form field doesn't hurt anything, AFAIK.

Posted by: pandy Apr 10 2019, 02:58 PM

QUOTE(RainLover @ Apr 10 2019, 07:15 PM) *

QUOTE(pandy @ Apr 10 2019, 05:58 AM) *

I guess a normal reset button is out of the question?

QUOTE
You should usually avoid including reset buttons in your forms. They're rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button).

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset

If that's so, why are you using one? happy.gif

Posted by: CharlesEF Apr 10 2019, 03:49 PM

QUOTE(RainLover @ Apr 10 2019, 12:08 PM) *

QUOTE(CharlesEF @ Apr 10 2019, 03:12 AM) *

The function detectChange() doesn't return false.

Thanks for the answer, but I don't understand what you mean.

Well, that function should return true or false! Correct? Currently it only returns true, if the inputs are numeric. Right after the closing } of the for statement is where the 'return false;' should be.

I have no idea how browser field validation works, I don't use it at all. Remember, any javascript validation code should be repeated in the PHP script on the server.

Why not use a normal reset button? I'm not even sure a button has the 'reset' attribute.

Posted by: Christian J Apr 10 2019, 04:58 PM

QUOTE(CharlesEF @ Apr 10 2019, 10:49 PM) *

Well, that function should return true or false! Correct? Currently it only returns true, if the inputs are numeric. Right after the closing } of the for statement is where the 'return false;' should be.

Currently I suppose it's used as a boolean:

CODE
if (detectChange() ...

However, all it takes is for one of the number INPUT fields to have a value to make detectChange() return true.

(And again, I don't see the purpose of checking for INPUT values before resetting.)

QUOTE
I'm not even sure a button has the 'reset' attribute.

It does!

Posted by: CharlesEF Apr 10 2019, 05:56 PM

Actually, isn't the form that has the reset method? An input or button can have a type of reset but doesn't that just call the reset method of the form itself?

Posted by: pandy Apr 10 2019, 08:52 PM

Yes. There is no such attribute. Unless HTML 5 has come up with one. tongue.gif

Posted by: Christian J Apr 11 2019, 04:57 AM

QUOTE(CharlesEF @ Apr 11 2019, 12:56 AM) *

Actually, isn't the form that has the reset method?

When using javascript, yes.

QUOTE
An input or button can have a type of reset but doesn't that just call the reset method of the form itself?

No, an HTML Reset button doesn't need to use javascript.

Posted by: Christian J Apr 11 2019, 04:58 AM

QUOTE(pandy @ Apr 11 2019, 03:52 AM) *

Yes. There is no such attribute. Unless HTML 5 has come up with one. tongue.gif

Is nobody reading the spec anymore? tongue.gif

https://www.w3.org/TR/html401/interact/forms.html#adef-type-BUTTON
https://www.w3.org/TR/html/sec-forms.html#element-attrdef-button-type

Posted by: pandy Apr 11 2019, 06:21 AM

Doesn't anyone understand it anymore? There is a reset button, but there is no reset attribute. tongue.gif

QUOTE
No, an HTML Reset button doesn't need to use javascript.


Of course not. But that's what a reset attribute would need. laugh.gif

But that isn't how I interpreted what Charles said. I was more thinking he meant that the functionality probably is a feature of the form rather than of the button. That the button just triggers it.

Posted by: Christian J Apr 11 2019, 09:51 AM

QUOTE(pandy @ Apr 11 2019, 01:21 PM) *

Doesn't anyone understand it anymore? There is a reset button, but there is no reset attribute. tongue.gif

I thought you meant that only INPUT (and not BUTTON) elements could use the TYPE=RESET attribute value. cool.gif

QUOTE
But that isn't how I interpreted what Charles said. I was more thinking he meant that the functionality probably is a feature of the form rather than of the button. That the button just triggers it.

You mean similar to how you can submit a form with the Enter key, without using a submit button? Otherwise I'd say the reset functionality is part of the rendering engine.


Posted by: pandy Apr 11 2019, 10:19 AM

A T T R I B U T E ! laugh.gif

No, I meant similar to do submit button. But exactly how it works isn't important. Only that it does work.

Posted by: CharlesEF Apr 11 2019, 12:33 PM

QUOTE(Christian J @ Apr 11 2019, 04:57 AM) *

QUOTE
An input or button can have a type of reset but doesn't that just call the reset method of the form itself?

No, an HTML Reset button doesn't need to use javascript.
I'm not talking about using javascript. The browser itself makes the call, not the user javascript. (pandy understands me)

But, I agree with you, the OP's javascript makes no sense. Really, all the OP needs is:
CODE
<form>
  <input type="number">
  <input type="number">
  <button type="reset">Reset</button>
</form>
Of course, when he does add a sumbit button nothing will be submitted without a name attribute for each element.

Posted by: RainLover Apr 12 2019, 02:37 AM

QUOTE
The above applies to all Reset buttons, regardless of how they're made.

The confirm dialog box prevents unwanted reset of the form.

QUOTE
Otherwise, why check in the javascript that the number INPUT field has a value? Resetting an empty form field doesn't hurt anything, AFAIK.

The confirm box should appear only when there’s a value. (a non-empty input field)

Posted by: pandy Apr 12 2019, 08:46 AM

Some find confirm boxes irritating. That warning about reset buttons have been around since the beginning of things. I never thought it was a real concern. Today, when the average user is much more experienced I don't think it's a concern at all. But that's me.

Posted by: Christian J Apr 12 2019, 09:43 AM

This one makes the Reset button disabled until a form field has changed (detected using the oninput event). After resetting, the button is disabled again.

Note that browser results vary depending on both javascript support and how number INPUT fields are managed.

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

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function()
{
    var form = document.querySelector('form');
    form.querySelector('button').disabled=true;
    var inputs = form.querySelectorAll('input');

    // re-enable Reset button after oninput event fires
    for(var input of inputs)
    {
        input.addEventListener('input', function()
        {
            form.querySelector('button').disabled=false;
        });
    }

    form.querySelector('button').addEventListener('click', function()
    {
      if (confirm('Are you sure you want to reset?'))
      {
        form.reset();
        form.querySelector('button').disabled=true;
      }
    });
}
);
</script>

Posted by: Christian J Apr 12 2019, 09:56 AM

QUOTE(pandy @ Apr 12 2019, 03:46 PM) *

Some find confirm boxes irritating.

Yes, Jakob doesn't like it: https://www.nngroup.com/articles/reset-and-cancel-buttons/

QUOTE
Today, when the average user is much more experienced

Not so sure about that, many newcomers to the web are only familiar with dumbed-down devices (like smartphones, or browsers that hide part of the URL), so my guess is they learn very little. But to me the problem with Reset buttons is not so much about the users' experience, as avoiding clicking the button by mistake.

Posted by: RainLover Apr 12 2019, 10:14 AM

QUOTE(Christian J @ Apr 12 2019, 09:43 AM) *

This one makes the Reset button disabled until a form field has changed (detected using the oninput event). After resetting, the button is disabled again.

Note that browser results vary depending on both javascript support and how number INPUT fields are managed.

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

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function()
{
    var form = document.querySelector('form');
    form.querySelector('button').disabled=true;
    var inputs = form.querySelectorAll('input');

    // re-enable Reset button after oninput event fires
    for(var input of inputs)
    {
        input.addEventListener('input', function()
        {
            form.querySelector('button').disabled=false;
        });
    }

    form.querySelector('button').addEventListener('click', function()
    {
      if (confirm('Are you sure you want to reset?'))
      {
        form.reset();
        form.querySelector('button').disabled=true;
      }
    });
}
);
</script>



What if the user clicks Cancel?

Posted by: Christian J Apr 12 2019, 10:58 AM

QUOTE(RainLover @ Apr 12 2019, 05:14 PM) *

What if the user clicks Cancel?

You're right, seems my script doesn't terminate the reset that way. Anyone knows why not?

This version seems to cancel in Firefox and Edge, but not in Vivaldi/Chrome:

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

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function()
{
    var form = document.querySelector('form');
    form.querySelector('button').disabled=true;
    var inputs = form.querySelectorAll('input');

    // re-enable Reset button after oninput event fires
    for(var input of inputs)
    {
        input.addEventListener('input', function()
        {
            form.querySelector('button').disabled=false;
        });
    }

    form.querySelector('button').addEventListener('click', function()
    {
        if(confirm('Are you sure you want to reset?'))
        {
            form.reset();
            form.querySelector('button').disabled=true;
        }
    });
});
</script>

Posted by: RainLover Apr 12 2019, 11:07 AM

QUOTE(Christian J @ Apr 12 2019, 10:58 AM) *

QUOTE(RainLover @ Apr 12 2019, 05:14 PM) *

What if the user clicks Cancel?

You're right, seems my script doesn't terminate the reset that way. Anyone knows why not?

This version seems to cancel in Firefox and Edge, but not in Vivaldi/Chrome:

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

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function()
{
    var form = document.querySelector('form');
    form.querySelector('button').disabled=true;
    var inputs = form.querySelectorAll('input');

    // re-enable Reset button after oninput event fires
    for(var input of inputs)
    {
        input.addEventListener('input', function()
        {
            form.querySelector('button').disabled=false;
        });
    }

    form.querySelector('button').addEventListener('click', function()
    {
        if(confirm('Are you sure you want to reset?'))
        {
            form.reset();
            form.querySelector('button').disabled=true;
        }
    });
});
</script>



Thanks for the answer! I’m convinced to follow your advice and use a <button> element of type "reset", but control its behavior using java script:

CODE
if (detectChange() && !confirm('Are you sure you want to reset?')) {
  event.preventDefault();
}

https://jsfiddle.net/Mori/Lpzdrsk1/4/

Now the reset button clears anything, but the confirm dialog box appears only when there are real values: numbers!

Posted by: RainLover Apr 12 2019, 10:54 PM

QUOTE(pandy @ Apr 12 2019, 08:46 AM) *

Some find confirm boxes irritating.

They're useful if you use them right — just don't overdo it and let moderation be your guide! smile.gif

Posted by: Christian J Apr 13 2019, 04:12 AM

QUOTE(RainLover @ Apr 12 2019, 06:07 PM) *

CODE
if (detectChange() && !confirm('Are you sure you want to reset?')) {
  event.preventDefault();
}


Aha, that did the trick. Thank you!

Strange that "return false" works with inline JS:

CODE
<button type="reset" onclick="return false;">...

but not with external JS, like I used in previous posts.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)