JS & JS Libraries

Jquery validation of ip addresses, check if empty, ip address and range of ip addresses

Jquery validation of ip addresses, check if empty, ip address and range of ip addresses


Jquery validation of ip addresses, check if empty, ip address and range of ip addresses

The aim here is to front end validate ( back end validation still needs to happen ) the input of an ip address.

We want to check that is is not empty, that it looks like an ip address and also we want to restrict it to only ip addresses we want.

The input field looks like this

<input type="text" name="ip_address"  id="ip-address" value=""><p id="message"></p>

Here is the javascript 

<style>
#submitbutton
{
  display:none
}
</style>
<script>

function isIPv4Address(entry) { 
  var blocks = entry.split(".");
    if( (blocks[0] == '192') || (blocks[0] == '127') ||  (blocks[0] == '122') ) { } else {
    //this probably could be done in a array test with in array 
      $("#message").html("");
      $("#message").append(" This IP address shoul start with 192/127/122 ");
      toggleSubmit(false);
    }
    if(blocks.length === 4) { 
      return blocks.every(function(block) { 
      const value = parseInt(block, 10); 
      if(value >= 0 && value <= 255){ 
        var i = block.length; while (i--) { 
          if(block[i] < '0' || block[i] > '9'){ return false; }
        } 
          return true;
        } 
      }); 
    } 
  return false; 
  }

function isEmpty(entry) {   
  if(entry === ''){
    return false; }
  else {
   return true;
  }
}

$('#submitbutton').hide();

function toggleSubmit(value) {
  if(value == false) {
    $('#submitbutton').hide();
  } else {
    $('#submitbutton').show();
  }

$(function(){ 
  $('#ip-address').keyup(function() {
    var getvalue= $("#internal-ip-address").val();
    var checkempty = isEmpty(getvalue);
    if(checkempty == true){
      $("#message").html("");
      var result= isIPv4Address(getvalue);
      if(result == false){
        $("#message").append(" This does not look like an IP address ");
        toggleSubmit(result);
      } else {
        toggleSubmit(result);
      }
    } else {
      $("#message").append(" IP address can not be empty ");
      toggleSubmit(true);
    }
    
  });
});
</script> 

Published: 21st May 2019 by Gabriel Kolbe

Adverts