Javascript - Value.replace includes 1 letter

Question

I am creating a login page, and i want the username to only have an input of numbers, so it will accept 1000 but if i input 1000t and try to submit the form it should decline it.

I tried doing it a different approach and not allow the user to enter letters at all but when i use my code, it lets me type upto 1 character for some reason. I.e. i can type 1000t but not 1000ttt. If i try to type 1000t followed by a "f" it will replace the t with a f, so ill get 1000f. But i only want numbers to appear

My script:

<script>
function validate(evt){
 evt.value = evt.value.replace(/[^0-9]/g,"");
    }
</script>

My form:

<form action="customer_login.jsp" method="POST">
  Customer Number: <input type="text" name="username" onkeypress="validate(username)" />
  <br />
  Password: <input type="text" name="password" />
  <br />
  <input type="submit" value="Login" />
</form>

Edit: I also noticed if i type 1001a and press tab, it removes the a, but if i click onto the password box it keeps the a

Almost, but how would i not allow it to use negative numbers then? — , Mar 07 '17 at 19:03
@ssc-hrep3 That allows all floating point numbers. From OP's script, it seems like sign and decimal point should be excluded. — Ted Hopp, Mar 07 '17 at 19:03
@TedHopp correct, they have to be whole numbers, and the problem is that my actual JSP form only allows input of text, so that's why i wanted to keep type as text i.e. the way i did the login in jsp is a string — , Mar 07 '17 at 19:04
http://stackoverflow.com/questions/19966417/prevent-typing-non-numeric-in-input-type-number — epascarello, Mar 07 '17 at 19:05
what you are doing here is replacing every character that is not a number [0-9] with `" "`. Maybe you shoudl try `evt.value = evt.value.replace(/[^0-9]/g,"");` — elmiomar, Mar 07 '17 at 19:05
Sorry that was a mistake in my pasting the code onto stack overflow, i dont originally have a space there — , Mar 07 '17 at 19:06

ssc-hrep3 · Accepted Answer · 2017-03-07T19:13:39.507

You could use <input type="number">. This would however include negative numbers, floating point numbers and special numbers (10e4, etc.).

If you want to have a regular expression, you can pass the element to the JavaScript function by using this. Then, replace the value of the element by the modified, new value. Your problem occurred, because you used onkeypress. This event is immediately fired when you press a key. The actual letter is added only after releasing the key. So, you need to use onkeyup instead. Here is a snippet:

function validate(element) {
  element.value = element.value.replace(/[^0-9]/g, '');
}

<form action="customer_login.jsp" method="POST">
  Customer Number: <input type="text" name="username" onkeyup="validate(this)" />
  <br />
  Password: <input type="text" name="password" />
  <br />
  <input type="submit" value="Login" />
</form>

score 0 · Answer 2 · answered Mar 07 '17 at 19:20

Use onkeyup instead of onkeypressand remove space from second param of replace function

function validate(evt){
    evt.value = evt.value.replace(/[^0-9]/g,"");  
   }

  <form action="login.php" method="POST">
    Customer Number: <input type="text" id="username" name="username" onkeyup="validate(username)" />
    <br />
    Password: <input type="text" name="password" />
    <br />
    <input type="submit" value="Login" />
  </form>

Javascript - Value.replace includes 1 letter

2 Answers2