Is That An IP Address?


Author: Vincent Berger
Created: Oct 4, 2018






The client can check wether he inserted a valid IP address.
This check will be preformed via AJAX GET request to the server: ip-api.com
A valid IP addres begins from the value 0 to 255. negative values are invalid just like values above 255.
After checking, a response should appear wether a input is valid or not valid. When a input is valid, A JSON response in the ip-api.com website is generated, and the AJAX script GET the JSON output to show the output to the client.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Is That An Valid IPv4 Address?</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        
    </head>
    <body>
        <div id="box1">
            <input id="input1" type="number" placeholder=" 0-255">
            <input id="input2" type="number" placeholder=" 0-255">
            <input id="input3" type="number" placeholder=" 0-255">
            <input id="input4" type="number" placeholder=" 0-255">
            <button onclick="validate()">
                Validate
            </button>
        </div>
        <div id="output">
            
        </div>
        <div id="outputIP">
            <h3>Real IPv4 Address output via IP-API.com with AJAX</h3>
        </div>
    </body>
</html>
				

CSS:

body {
    background-color:black;
    text-align:center;
}
input {
    width:60px; border:0px; 
    background-color:white;
    border-radius:7px; outline:none;
}
#output {
    color:white;
}
#outputIP {
    color:white;
}
button {
    border:0px; color:white;
    background-color:darkgrey;
    border-radius:4px; outline:none;
}
#true {
    color:green;
}
#false {
    color:red;
}
				

Javascript:

function validate() {
    var input1 = $("#input1").val(),
        input2 = $("#input2").val(),
        input3 = $("#input3").val(),
        input4 = $("#input4").val(),
        input = (input1+"."+input2+"."+input3+"."+input4);
    if (input1 <= 255 && input2 <= 255 && input3 <= 255 && input4 <= 255) {
        $("#output").html("<h3 id='true'>VALID IPv4<br>"+input+"</h3>");
    } else {
        $("#output").html("<h3 id='false'>INVALID IPv4<br>"+input+"</h3>");
        return;
    }
    
    var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
         var Text = this.responseText,
            Parse = JSON.parse(Text),
            Elem = ("Association: "+Parse.as+"<br>Orginasation: "+Parse.org+"<br>ZipCode: "+Parse.zip+"<br>City: "+Parse.city+"<br>Region: "+Parse.region+"<br>Country: "+Parse.country+"<br>ISP: "+Parse.isp+"<br>Lattitude: "+Parse.lat+"<br>Longtitude: "+Parse.lon+"<br>Timezone: "+Parse.timeZone+"<br>Query: "+Parse.query);
        $("#outputIP").html(Elem);
        
        }
    };
    xhttp.open("GET", "http://ip-api.com/json/"+input1+"."+input2+"."+input3+"."+input4, true);
    xhttp.send();
    //console.log(this.readyState+this.status);
}
				


Place a comment related to this article

!

When u want to use a code block in your comment, you need to work with the <pre> and <code> tags.
You can specify the program language you want to use in the comment to assign the code tag class attribute with your program language name.
<pre>
  <code class="javascript">
   //_ Use lowercase phrase within the code tags class attribute:
   //_ C++ refered as cpp
   //_ C# refered as cs
   //_ Objective-C and C both refered as c
   //_ VB.net refered as vbnet
   //_ And so on...
  </code>
</pre>
Available program languages:
  • Access log
  • Apache
  • AutoIt
  • Arduino
  • Bash
  • C
  • C#
  • C++
  • CSS
  • CoffeeScript
  • HTML or XML
  • JSON
  • Java
  • JavaScript
  • Nginx
  • Objective-C
  • PHP
  • Perl
  • Python
  • Ruby
  • SQL
  • Swift
  • PowerShell
  • VB.net
We do not allow any direct type of links in the comment section.
Please format a link with with the following query:
domain dot com/?q=query
Thank you for understanding.


3248fsdf1283 Captcha


Back to Top