1

I have a user input where only a certain set of characters is allowed. That is, user should be able to enter only a number, possibly with floating point. User may use either comma or dot as a separator.

I've decided to implement this using JS replace function. My approach is to replace everything that doesn't match the set with empty string.

I've sorted out the regex to match the set pretty quickly, here it is: 

^\d+[,.]{0,1}\d+$

I know it's probably not ideal, but it's quite okay since there is a server-side validation anyway.

However, no matter how hard I tried, I was not able to figure out how to replace anything that doesn't match this regex with empty string.

Here's how I use replace:

var cleanInputOut = function (element) {
    element.value = element.value.replace(/<RegEx goes here>/g, '')
}

I am probably doing it wrong. I would be okay even with quite simple functionality - simply replace any non-digit, not comma and not dot with empty string. I've tried negative lookahead in regex but unfortunately I was not able to make it work as I want to.

Vlad Stryapko
  • 1,035
  • 11
  • 29
  • Possible duplicate of [Input number validation - Restrict to enter only numbers or digits, int & float both](http://stackoverflow.com/questions/30287531/input-number-validation-restrict-to-enter-only-numbers-or-digits-int-float) – vinayakj Nov 28 '15 at 10:24
  • The solution there is different in that it doesn't use Replace function. I've checked this too but I was curious about whether it's possible to achieve such functionality with Replace. – Vlad Stryapko Nov 28 '15 at 10:26
  • See the above post's update section, you can customize the allowed characters there and also used replace function – vinayakj Nov 28 '15 at 10:28
  • I've noticed the usage of the replace function; my point was that I would like to use regex solely to solve this problem, whilst the solution you've posed is a bit more complicated. I do not doubt it could be cleaner or more flexible, or more robust, I am just interested in whether it's possible to use a simple replace function and regex to achieve what I wanted. As it turns out, it is. – Vlad Stryapko Nov 28 '15 at 10:32
  • So you want to clear/format input field once the user has entered and focused out? In that case yes you can use simple _regex_ unless you want to restrict user from entering invalid input – vinayakj Nov 28 '15 at 10:41
  • I intended to use this function when a user changes the value of input, i.e. invalid character won't even appear in the text field. However, I've considered the topic about UX which was provided in the topic so I will probably use your version of validation. I am not sure about it since it requires some discussion with other people and we'll have to change the general validation logic for all inputs in our app. Nonetheless, thank you for answers and help. Though I don't think my question is 100% duplicate, I don't mind if you mark it so if you wish. – Vlad Stryapko Nov 28 '15 at 11:07
  • ok.. see what fits you.. retracted the duplicate vote.. – vinayakj Nov 28 '15 at 11:37
  • 1
    Stop reinventhing the wheel. Just use what HTML5 gives you, do the server-side validation and be done with it. http://html5pattern.com – Ingo Bürk Nov 28 '15 at 12:19
  • Yeah, I agree with you on that matter. I can't say HTML 5 is always better, but AFAIK our project doesn't require that we support old browsers so it will probably be the best solution. – Vlad Stryapko Nov 28 '15 at 13:22

1 Answers1

3

It looks like I figured it out using

/[^\d,.]/g

So the function is 

 var cleanInputOut = function (element) {
     element.value = element.value.replace(/[^\d,.]/g, '')
 }

I don't really get why the ^ character is used both to mark a negated set and the beginning of the line, but it appears to be working.

I tried this regex before and it behaved quite strangely from time to time but I am not sure the issue was with the regex itself. Anyway, any advices as to the approach or regex are welcome.

Vlad Stryapko
  • 1,035
  • 11
  • 29