intl-tel-input плагин код страны и проверка - PullRequest
Новая
       13

intl-tel-input плагин код страны и проверка

0 голосов
/ 06 марта 2019

Я использую плагин intl-tel-input и хочу сделать две вещи. Во-первых, я хочу, чтобы плагин отключил кнопку отправки и перенаправлял меня на вход (как это делает плагин проверки jQuery), пока пользователь не введет правильный номер. Во-вторых, когда я щелкаю внутри ввода, а затем вне ввода и затем делаю это снова, неопределенное сообщение появится под входом. Это мой код: 

<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>
...