Question

我正在使用国际电话输入插件，我想做两件事。首先，我要使插件禁用“提交”按钮，然后将我重定向到输入（就像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>

国际电话输入插件国家代码和验证

0 个答案: