IP masking HTML input form with jQuery

Question

So I need to validate an input field to accept IP addresses.

<form method="POST">
    <input type='text' placeholder='xxx.xxx.xxx.xxx' name='IP'>
</form>

Since there is no IP value for the attribute type, I would need to validate it using Javascript or some client-sided language. I've reached to this jQuery snippet using a mask library.

jQuery(function($){
   $("input").mask("9?99.9?99.9?99.9?99", {placeholder:" "});
});

This however doesn't work on my side. Here is how I include the scripts (just to point out).

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/1.3.1/dist/jquery.maskedinput.js" type="text/javascript"></script>

Also, even if I manage to make this work, it still isn't the best option since two-digit parts of an IP address won't be rendered properly (i.e. 84.55.11.499). So my questions are:

Why does the above code not work on my end but does on JSFiddle?
How do I filter two-digit IP addresses with the mask library?

David Arenburg · Accepted Answer · 2016-03-29 09:56:54Z

14

I know is late, I know you need jQuery, but just in case you didn't knew it in HTML5 you can use pattern attribute with a regular expresion...

For example:

<input required pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$">

That regular expresion will validate IP addresses like:

xxx.xxx.xxx.xxx
x.x.x.x
xx.xx.xx.xx
x.xx.xxx.xx

edited Mar 29, 2016 at 9:56

David Arenburg

92.4k18 gold badges145 silver badges202 bronze badges

answered Mar 29, 2016 at 9:36

Iván Sixto López

1611 silver badge5 bronze badges

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

Comments

Scott Selby · Accepted Answer · 2014-06-24 18:31:36Z

2

I see you're already using a jQuery plugin - try this one that has a fully working IP mask

This plugin here

it's done like this:

 $('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {translation: {'Z': {pattern: /[0-9]/, optional: true}}});

or the identical - little shorter:

 $('.ip_address').mask('099.099.099.099');

the last example is the last line used in my fiddle example

according to the jQuery mask docs :

0: Only Numbers.

9: Only Numbers but optional.

so you see - 099.099.099.099, if you wanted to force 2 digits in between each decimal 009.009.009.009

edited Jun 24, 2014 at 18:31

answered Jun 24, 2014 at 17:18

Scott Selby

9,58012 gold badges63 silver badges97 bronze badges

8 Comments

Levis Foster Over a year ago

Doesn't really answer my questions.

Scott Selby Over a year ago

yes it does, if you chose to use this plugin - you would use the line of code I showed. THis is how to mask with the decimal points - each section at least one number , but allows for 3 numbers . These are the rules for IP address text box

Scott Selby Over a year ago

see it work here - I pasted the minified mask javascript in there , it was easier then uploading.... jsfiddle.net/54hh2/2

Levis Foster Over a year ago

Yes but it still doesn't count 2-digit numbers as part of an IP address.

Scott Selby Over a year ago

yes it does , hit space bar or "." after the 2 digits

|

Elham AM · Accepted Answer · 2018-09-22 11:29:18Z

1

I know this post is old, But I think the following code is the correct answer.

For Example:

<input type="text" class="form-input" id="ipv4" name="ipv4" placeholder="xxx.xxx.xxx.xxx"/>

Jquery code

var ipv4_address = $('#ipv4');
ipv4_address.inputmask({
   alias: "ip",
   "placeholder": "_"
});

This code in codepen

answered Sep 22, 2018 at 11:29

Elham AM

3756 silver badges15 bronze badges

Comments

Shahram · Accepted Answer · 2023-05-08 12:38:19Z

0

this solution worked for me finely.

download this js file from : [https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js] or [https://github.com/shahram4m/blogfy/blob/main/static/js/jquery.inputmask.bundle.js] and reference it to your page. then using this Jquery code :

var ipv4_address = $('#ipInput');
ipv4_address.inputmask({
   alias: "ip",
   "placeholder": "_"
});

edited May 8, 2023 at 12:38

answered May 8, 2023 at 11:22

Shahram

234 bronze badges

Collectives™ on Stack Overflow

IP masking HTML input form with jQuery

4 Answers 4

Comments

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related