JavaScript, HTML, CSS - How to Restrict Number / Value Allowed in Input Field With - Validity Check

Question

1.) The js fiddle isn't rendering the <div> with the id result2 from the HTML.

After clicking the button, the multiply() function should run and it should get the innerHTML of the <div> with id result2.

I'm not sure why nothing is happening after clicking on the button in the fiddle. It should say:

"All of the numbers between 1 and 5 multiplied together equals: 120"

(if 5 is entered, for example). We should see this displayed in the result2 div.

2.) Why is the text field with id factorialInput not restricting the input to 10 at the max? I thought that I had set the max for this input field here:

<input id="factorialInput" type="number" max="10" size="20"/>

(as per answers from other articles).

I've tried maxlength as well - I don't understand why it's allowing numbers 11 and up.

Any ideas?

JavaScript

function multiply() {
    let num = document.getElementById("factorialInput").value;
    let sum = 1;
    for (let i=1; i<= num; i++) {
        sum = sum * i;
    }

    document.getElementById("result2").innerHTML  = "All of the numbers between 
    1 and " + num + " multiplied together equals: " + sum ;

}

HTML

<div class="row">
    <form id="enterValue">
    Enter a number between 1 and 10: 
    <input id="factorialInput" type="number" max="10" size="20"/>
    <input type ="button" value="Submit" onclick="multiply();" max="10" />
    </form>
    <br><br>
<div id="result2"></div>
</div>

CSS

.row {
    height: 200px;
}

Thanks!

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number — Bergi, Feb 28 '19 at 16:02
https://stackoverflow.com/questions/7043649/why-does-this-simple-jsfiddle-not-work — Bergi, Feb 28 '19 at 16:06
What exactly do you expect from restricting the range? If a number larger than 10 is entered, the input is properly marked as invalid, but your code doesn't check for that. — Bergi, Feb 28 '19 at 16:08
@Bergi yes I still need to finish writing the code to check for invalid entries - I'm just trying to restrict entries to 1 - 10 via HTML and JS first if that's possible — HappyHands31, Feb 28 '19 at 16:16
What do you expect to happen when an invalid value is entered? — Bergi, Feb 28 '19 at 16:34
@Bergi I'll need to write some code for it, but I'll need for the for loop to not execute and instead display a message in the `result2` div - "please enter a number between 1 and 10". I guess I'll need an `if-else` statement. But what @Hien Nguyen answered with below was what I was looking for initially. — HappyHands31, Feb 28 '19 at 16:44
I think @Shilly's code with [`reportValidity`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity) is strictly better suited for that — Bergi, Feb 28 '19 at 16:48
so `reportValidity` will check if the input is valid based on `min` and `max`? — HappyHands31, Feb 28 '19 at 16:54
Yes, and as a bonus it will even show a proper localised error message. — Bergi, Feb 28 '19 at 16:56

Shilly · Accepted Answer · 2019-02-28T16:39:07.563

You have to check manually if the input is valid or not, as described in the docs.

function multiply() {
  let input = document.getElementById("factorialInput");
  if ( input.reportValidity() ) {
    let num = input.value;
    let sum = 1;
    for (let i=1; i<= num; i++) {
      sum = sum * i;
    }
    let message = "All of the numbers between 1 and " + num + " multiplied together equals: " + sum;
    document.getElementById("result2").innerHTML  = message;
  }
}

<div class="row">
    <form id="enterValue">
      Enter a number between 1 and 10: 
      <input id="factorialInput" type="number" max="10" size="20"/>
      <input type ="button" value="Submit" onclick="multiply();" max="10" />
    </form>
    <br>
    <br>
  <div id="result2"></div>
</div>

Jako Basson · Answer 2 · 2019-02-28T16:13:08.283

1

First if you look at the console, there is an error that the multiply function is not defined. Moving the javascript inline above the html resolves the missing function reference.

Second The input type number restricts number inputs to the max value set if you use the increment/decrement arrows, but it does not stop the user from entering a larger number. If you need to stop input of larger numbers, you can achieve this by using an onkeyup or onkeydown event to change the input value.

Updated fiddle with changes mentioned applied: https://jsfiddle.net/6pagfr2t/

edited Feb 28 '19 at 16:13

answered Feb 28 '19 at 16:06

Jako Basson

1,461
12
19

Sorry but to start with I do not see a console in jsfiddle: https://i.imgur.com/21JB5UK.png - but yes moving the JS inline into the HTML certainly resolves the missing function reference: https://jsfiddle.net/gcqojLfp/4/ – HappyHands31 Feb 28 '19 at 16:09
2

Jako is talking about the browser console, which is most accessible in Chrome and Firefox. I noticed that the fiddle itself has the JavaScript being added/executed on document load. Changing it to be included in the header made it work for me. – J.T. Blum Feb 28 '19 at 16:11
1

@HappyHands31yes as stated by J.T. I'm referring to the browser console which can be opened using F12 in most modern browsers. Javascript errors not handled by code is shows in your browser console which is useful for debugging. – Jako Basson Feb 28 '19 at 16:14

score 1 · Answer 3 · answered Feb 28 '19 at 16:11

1

You can implement event keyup keydown to prevent invalid value.

$('#factorialInput').on('keydown keyup', function(e){
    if ($(this).val() > 10 
        && e.keyCode !== 46 // keycode for delete
        && e.keyCode !== 8 // keycode for backspace
       ) {
       e.preventDefault();
       $(this).val('');
    }
});

https://jsfiddle.net/viethien/mrt6hw8c/6/

answered Feb 28 '19 at 16:11

Hien Nguyen

24,551
7
52
62

Awesome because this way I don't even have to rewrite the function to check to see if the number entered is greater than 10. Thank you. – HappyHands31 Feb 28 '19 at 16:21
1

There are other ways to input a value than with the keyboard. – Bergi Feb 28 '19 at 16:33

score 1 · Answer 4 · answered Feb 28 '19 at 17:27

Alternatively, you can do a validity pattern check WITHOUT Javascript. The HTML 5 input spec allows the use of a regex to make an input valid/invalid.

Important note: This only returns a TRUE/FALSE. It's up to you to handle to create and display any errors.

Examples:

<input type="number" pattern="[1-9]|0[1-9]|10" placeholder="1 to 10" value="" />

And CSS

input:valid {
  background-color: green;
}

input:invalid {
  background-color: red;
}

More info about styling valid/invalid inputs

JavaScript, HTML, CSS - How to Restrict Number / Value Allowed in Input Field With - Validity Check

4 Answers4