kendoMaskedTextBox format IP address

Solution 1:

As recently as July 22, 2021, Telerik (owners of Kendo-UI) has declined to implement the capability to make a MaskedTextBox represent groups (like the parts of an IP4 address). See: https://feedback.telerik.com/kendo-jquery-ui/1359639-maskedtextbox-ip-address

One alternative would be to leverage a separate library, like this answer: https://stackoverflow.com/a/44290912/1920035

Another alternative would be to join four MaskedTextBox inputs that all have a mask of 000, lay them out in a way that looks like an IP address input, and then when the controls change, update a single value using the raw values from the inputs. Then when you need to use the value, use RegEx to validate that the input is valid. Something along these lines:

$(document).ready(function() {
  let ip4 = '';

  const maskedtextboxUpdate = function() {
    const part1 = $('#maskedtextbox-ip1').data('kendoMaskedTextBox').raw();
    const part2 = $('#maskedtextbox-ip2').data('kendoMaskedTextBox').raw();
    const part3 = $('#maskedtextbox-ip3').data('kendoMaskedTextBox').raw();
    const part4 = $('#maskedtextbox-ip4').data('kendoMaskedTextBox').raw();
    ip4 = `${part1}.${part2}.${part3}.${part4}`;
  };

  $('#button-validate').on('click', function() {
    const regexIP4 = /(\b25[0-5]|\b2[0-4][0-9]|\b[01]?[0-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}/g;

    if (!regexIP4.test(ip4)) {
      kendo.alert('Please enter a valid IP address.');
      return;
    }
    kendo.alert('The IP address is valid.');
  });
  $('#maskedtextbox-ip1').kendoMaskedTextBox({
    mask: '000',
    change: maskedtextboxUpdate
  });
  $('#maskedtextbox-ip2').kendoMaskedTextBox({
    mask: '000',
    change: maskedtextboxUpdate
  });
  $('#maskedtextbox-ip3').kendoMaskedTextBox({
    mask: '000',
    change: maskedtextboxUpdate
  });
  $('#maskedtextbox-ip4').kendoMaskedTextBox({
    mask: '000',
    change: maskedtextboxUpdate
  });
});

<link href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default-v2.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>

<div>
  <input id="maskedtextbox-ip1" />
  .
  <input id="maskedtextbox-ip2" />
  .
  <input id="maskedtextbox-ip3" />
  .
  <input id="maskedtextbox-ip4" />
</div>
<button class="k-button" id="button-validate">Validate</button>

Dojo: https://dojo.telerik.com/AhOGULUP

Solution 2:

This is what I used to do in jQuery (I have since moved on to Angular and FormGroup validation).

var viewModel = kendo.observable({
  ip_addr: "",
  submit: function() {
    var validator = $("#example").kendoValidator({
      rules: {
        checkIP: function(input) {
          if (input.is("[name='Controller IP Address']") && input.val()) {
            input.attr(
              "data-checkIP-msg",
              "IP Address format is incorrect"
            );
            return validate_ip_address(input.val());
          }
          return true;
        }
      }
    }).data("kendoValidator");

    if (!validator.validate()) {
      console.warn("validation failed");
      return;
    } else {
      console.log(this.ip_addr);
    }
  },
});

kendo.bind($("#example"), viewModel);

function numeric_with_period(e) {
  var key;
  var keychar;
  if (window.event) key = window.event.keyCode;
  else if (e) key = e.which;
  else return true;
  keychar = String.fromCharCode(key);
  keychar = keychar.toLowerCase();
  // control keys
  if ((key === null) || (key === 0) || (key === 8) || (key === 9) || (key === 13) || (key === 27))
    return true;
  // alphas and numbers
  else if ((("0123456789.").indexOf(keychar) > -1))
    return true;
  else
    return false;
}

function validate_ip_address(ip_address) {
  if (/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ip_address)) {
    return (true)
  } else return (false)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.mobile.all.min.css">

<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>

<div id="example">
  <input name="Controller IP Address" data-role="maskedtextbox" data-bind="value: ip_addr" onkeypress="return numeric_with_period(event);" data-checkIP-msg="IP Address format is incorrect" maxlength="15" />
  <br />
  <span class="k-invalid-msg" data-for="Controller IP Address"></span>
  <br />
  <button data-role="button" class="k-button" data-bind="events: { click: submit }">Submit</button>
</div>

kendoMaskedTextBox format IP address

Solution 1:

Solution 2:

Related

Recent Posts