Don't let user to input wrong data - Improving IP address validation JavaScript [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

Want to improve this question? Guide the asker to update the question so it focuses on a single, specific problem. Narrowing the question will help others answer the question concisely. You may edit the question if you feel you can improve it yourself. If edited, the question will be reviewed and might be reopened.

Closed 5 years ago.

Improve this question

I am trying to make a masked input field to input IP addresses. Almost every solution I found have flaws.

Here https://stackoverflow.com/a/55837333 is the best solution I found, but it is still lets me to enter values higher than 255. Basically it works, but when I am trying to change the entered address, I can set even 192.999.1.1

How to reproduce the error:

Enter an IP address, e.g. 192.168.1.1
Select some part, like 192.__168__.1.1
Start entering numbers, and you get 192.999.1.1

How to improve the code to beat this issue?

here is the code I use

// Credits to @t_m27    
var options = {
  onKeyPress: function(text, event, currentField, options) {
    if (text) {
      var ipArray = text.split(".");
      var lastValue = ipArray[ipArray.length - 1];
      if (lastValue != "" && parseInt(lastValue) > 255) {
        ipArray[ipArray.length - 1] = '255';
        var resultingValue = ipArray.join(".");
        currentField.text(resultingValue).val(resultingValue);
      }
    }
  },
  translation: {
    'Z': {
      pattern: /[0-9]/,
      optional: true
    }
  }
};

$(".ipaddr").mask("0ZZ.0ZZ.0ZZ.0ZZ", options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<input type="text" class="ipaddr" />

Use an onchange event to restrict the values. E.g. if it goes out of range, have your event change the value to base min or max that's in range. — GetSet
– GetSet, Commented Jan 29, 2020 at 14:39

mplungjan · Accepted Answer · 2020-01-29 14:44:16Z

2

Something like this?

// Credits to @t_m27    
var options = {
  onKeyPress: function(text, event, currentField, options) {
    if (text) {
      var ipArray = text.split(".");
      ipArray = ipArray.map(num => num > 255 ? 255 : num)
      var resultingValue = ipArray.join(".");
      currentField.text(resultingValue).val(resultingValue);
    }
  },
  translation: {
    'Z': {
      pattern: /[0-9]/,
      optional: true
    }
  }
};

$(".ipaddr").mask("0ZZ.0ZZ.0ZZ.0ZZ", options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<input type="text" class="ipaddr" />

answered Jan 29, 2020 at 14:44

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

cerahe3782 Over a year ago

Thank you for the answer! Now when I select 168 from 192.168.1.1 and try to set 99 it gives 192.9.91.1. Any way to fix it?

cerahe3782 Over a year ago

ipArray = ipArray.map(num => num > 255 ? 255 : num); Shows syntax error. IE 11

mplungjan Over a year ago

Ie11 does not support the fat arrow - change to function or upgrade to edge chromium

cerahe3782 Over a year ago

Very strange. When I run this code in Mozilla here, as a code snipped I have a behaviour I wrote in the first comment. When I run it in my project, it works like a charm, but not in the IE 11. I've changed it to ipArray = ipArray.map(function (num) { return num > 255 ? 255 : num }); and now IE just freezes

cerahe3782 Over a year ago

Okay, now I know why IE freezes, it fires onKeyPress event always when currentField.text is being updated

Felipe N Moura · Accepted Answer · 2020-01-29 14:53:09Z

0

In case you want to use a function that returns true if it is a valid ip, or false otherwise, you can use it like this:

function isValidIp(ip) {
  return !ip.split('.').find(part => part > 255);
}

You can use this to show a message or perhaps mark the input as invalid.

answered Jan 29, 2020 at 14:53

Felipe N Moura

1,73516 silver badges15 bronze badges

Collectives™ on Stack Overflow

Don't let user to input wrong data - Improving IP address validation JavaScript [closed]

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related