Number must Starts from 03, Block PASTE & DRAG

by Faisal Khan Janjua

HTML

<div class="mobileNumWrapper">
  <span class="preWritten">03</span>
  <input type="text" value="" placeholder="XXXXXXXXX" maxlength="9" required="" id="spocMsisdn" class="numbersOnly">
</div>

dasudui 877888808 sd89s98ds98d dasd+232130

SCSS

.mobileNumWrapper {
  position: relative;
  & span.preWritten {
    top: 0;
    bottom: 0;
    z-index: 1;
    color: #000;
    margin: auto;
    opacity: 0.6;
    margin-top: 2px;
    font-size: 16px;
    font-weight: 700;
    position: absolute;
  }
  & input {
    border:none;
    outline:none;
    padding-left: 19px;
    border-bottom: 2px solid #000;
  }
  &.focused {
    & span.preWritten {
      opacity: 1;
    }
  }
  &.unmatched {
    & span.preWritten {
      opacity: 1;
    }
    & input {
      padding-left:19px;
      border-bottom: 2px solid red;
    }
  }
  &.matched {
    & span.preWritten {
      opacity:1;
    }
    & input {
      padding-left: 19px;
      border-bottom: 2px solid green;
    }
  }
}

JavaScript

jQuery(document).on('input', '.numbersOnly', function () { 
  this.value = this.value.replace(/[^0-9]/g, "");
});
jQuery(document).on('mouseenter paste', '.numbersOnly', function(){
  var val = jQuery(this).val();
  if (val!='0'){
    val=val.replace(/[^0-9]+/g, "");
    jQuery(this).val(val);
  }
});

$('.mobileNumWrapper input').on('blur',  function () {
	jQuery(this).parent().removeClass('focused');
});
$('.mobileNumWrapper input').on('focus', function () {
	jQuery(this).parent().addClass('focused');
});
jQuery(document).on('keyup paste mouseenter', '.mobileNumWrapper input', function(){
  classOnField(jQuery(this));
});

function classOnField(e){
  if(e.val().length == 9){
    e.parent().removeClass('unmatched').addClass('matched');
  }
  else if (e.val().length < 9 && e.val().length > 0 ){
    e.parent().removeClass('matched').addClass('unmatched');
  }
  else{
    e.parent().removeClass('matched unmatched');
  }
}