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:

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

Solution 1

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

Solution 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

Comments

[Levis Foster]

Doesn't really answer my questions.

[Scott Selby]

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]

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

[Levis Foster]

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

[Scott Selby]

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

[Scott Selby]

That code is dependent on jQuery and jQUeryUI, you have both of those loaded , right?

[Admin]

@Scott Selby i want to validate the field when the filed if the user enter 192.3.4. and forgot to put value after . then i want to validate the user how can i do that

[Scott Selby]

@UsamaLucky - that is a seperate question , google jquery validate ip address