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