intl-tel-input plugin country code and validation

问题

I'm using intl-tel-input plugin and I want to do two things. First, I want to make the plugin disable the submit button and redirect me to the input (as jQuery validation plugin do) until the user enters a valid number. Second, when I click inside the input and then outside the input and then do that again an undefined message will appear under the input. This is my code:

<form action="register.php" method="post" id="register_form">
<div class="row">
<div class="form-group col">
  <label for="mobile_number" style="font-weight: bold; cursor: text;"><span style="color:red;">* </span>Mobile Phone Number</label>
  <input type="tel" name="mobile_number" id="mobile_number" class="form-control form-control-lg validate"
  value="<?php if(isset($_POST['mobile_number'])){ echo $_POST['mobile_number'];}?>" style="width:230px;
  background-color:#EEEEEE;" required>
  <div id="valid-msg" class="hide">
  </div>
  <div id="error-msg" class="hide" style="color:#FF0000;">
  </div>
</div>
</div>
<div class="row">
  <div class="form-group col">
    <input type="submit" class="btn btn-lg btn-info" value="REGISTER" name="submit" style="width:505px;">
  </div>
</div><div class="clearfix"></div>
</form>
<script>
var input = document.querySelector("#mobile_number"),
errorMsg = document.querySelector("#error-msg");
validMsg = document.querySelector("#valid-msg");

// here, the index maps to the error code returned from getValidationError - see readme
var errorMap = [ "Please enter a valid mobile phone number.", "Please enter a valid mobile phone number.",
"Please enter a valid mobile phone number.", "Please enter a valid mobile phone number.", "Please enter a valid mobile phone number."];

// initialise plugin
    var iti = window.intlTelInput(input, {
  customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
    return "05X XXX XXXX";
},
initialCountry: "sa",
utilsScript: "intl-tel-input/js/utils.js"
});

var reset = function() {
    input.classList.remove("error");
    errorMsg.innerHTML = "";
    errorMsg.classList.add("hide");
    validMsg.classList.add("hide");
};

// on blur: validate
input.addEventListener('blur', function() {
    reset();
    if(input.value.trim()){
        if(iti.isValidNumber()){
            validMsg.classList.remove("hide");
        }else{
            input.classList.add("error");
            var errorCode = iti.getValidationError();
            errorMsg.innerHTML = errorMap[errorCode];
            errorMsg.classList.remove("hide");
        }
    }
});

// on keyup / change flag: reset
input.addEventListener('change', reset);
input.addEventListener('keyup', reset);

$("#mobile_number").on("blur", function(){
  if($(this).val() == '') {
   $(this).val("+" + $(".country[class*='active']").attr("data-dial-code") + $(this).val());
 }});
</script>

来源：https://stackoverflow.com/questions/55014456/intl-tel-input-plugin-country-code-and-validation

标签

javascript

jquery

intl-tel-input