-2

Create an html page with the following form:

<form method="post" name="example" action="">
  <p> Enter your name <input type="text"> </p>
  <input type="submit" value="Submit Information" />
</form>
<div id="a"></div>

Add a js validation function to the form that ensures that you can only add numbers in the textbox If you enter alphabets, you should generate an error message in the given div. -->

I run the requirement successfully and I'm giving the error message when it entered alphabets. However, it's giving me the same error message when I enter digits as well. Please kindly show how the function or the window.onload should be implemented. Thank you.

My answer is down below;

window.onload = function() {
  let form = document.getElementById('form_ref')
  form.onsubmit = function() {
    let user = form.user.value;
    if (parseInt(user) !== user) {
      document.querySelector('div').innerHTML = "Error! Please enter digits only!";
      return false;
    }
    return true;
  }
}
<form id="form_ref" method="post" name="example" action="">
  <label for="username">User</label><input type="text" name="user" id="username" required>
  <div id="a"></div>
  <br>
  <input type="submit" value="Submit Information" id="submit">
</form>
j08691
  • 204,283
  • 31
  • 260
  • 272
geo222
  • 1
  • google w3 input number – DCR Nov 26 '21 at 02:33
  • Does this answer your question? [Number input type that takes only integers?](https://stackoverflow.com/questions/8808590/number-input-type-that-takes-only-integers) `if (parseInt(user) !== user) {` is a strict type comparison, so you're checking if `int value === string value` which will always be false. Either loosening this restriction, implementing regex validation, or using default HTML `number` functionality are possible solutions here. – WOUNDEDStevenJones Nov 30 '21 at 19:36

1 Answers1

0

Your equality check parseInt(user) !== user will always return true because form.user.value is a string but parseInt(...) always returns an integer. If you want to check if the entry is an integer there are a couple ways.

You can change the input's type attribute to number to make sure only digits can be entered and then you just have to make sure it's an integer and not a decimal (type="number" still allows decimal numbers so not just digits). user will still be a string, but it's easier to check. I'd recommend using Number.isInteger(...) to do the checking:

if (!Number.isInteger(parseFloat(user))) {

If you really want to use type="text" you can iterate through user and make sure its characters are all digits:

for(let i = 0; i < user.length; i++) {
  if("0123456789".indexOf(user[i]) == -1) {
    document.querySelector('div').innerHTML = "Error! Please enter digits only!";
    return false;
  }
}
return true;

One advantage of this method is that you can make more characters available if you want to just by adding them to the string that's searched in the iteration. A disadvantage is that it's slower than the other method (the indexOf method has to iterate through the string for every character of user), but for your use case that seems irrelevant-- this function doesn't need to be called many times per second as it's a simple login type of thing, and it's client-side so you don't need to handle many instances at once. If speed is an issue you could probably make a comparison to the integer equivalencies of the characters:

if(user.charCodeAt(i) < "0".charCodeAt(0) || user.charCodeAt(i) > "9".charCodeAt(0)) {
Matt Pasta
  • 183
  • 7