英文:
validate phone number length using jquery not working
问题
我正在尝试使用jQuery验证电话号码长度,在用户开始输入时显示,我做了以下代码:
function validatePhone(phone) {
if (phone.value.length <= 10 && phone.value.length >= 5) {
let var = 'Yes';
return var;
} else {
let var = 'No';
return var;
}
}
function validate() {
let result1 = $("#result1");
let phone = $("#phone").val();
result1.text("");
if (validatePhone(phone)) {
result1.text(var);
result1.css("color", "green");
}
return false;
}
jQuery(function($) {
$("#phone").on("input", validate);
});
<input type="number" class="form-control" id="phone" name="phone">
<span class="label">Phone Number<span style="color:red">*</span> <span id="result1"></span></span>
英文:
i am trying to validate phone number length using jquery, when user start typing itself it should display, i did the following code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function validatePhone(phone) {
if (phone.value.length <= 10 && phone.value.length >= 5) {
let
var = 'Yes';
return var;
} else {
let
var = 'No';
return var;
}
}
function validate() {
let result1 = $("#result1");
let phone = $("#phone").val();
result1.text("");
if (validatePhone(phone)) {
result1.text(var);
result1.css("color", "green");
}
return false;
}
jQuery(function($) {
$("#phone").on("input", validate);
});
<!-- language: lang-html -->
<input type="number" class="form-control" id="phone" name="phone">
<span class="label">Phone Number<span style="color:red">*</span> <span id="result1"></span></span>
<!-- end snippet -->
however this doesnt work, can anyone please tell me what is wrong in here, thanks in advance
答案1
得分: 1
I cleaned up your code a bit, it was mostly ok but you had some small syntax errors and logic errors. Also I suggest using the label
tag. The code can be written even shorter if you want!
function validatePhone(phone) {
if (phone.length <= 10 && phone.length >= 5) {
return true;
} else {
return false;
}
}
function validate() {
let result1 = $("#result1");
let phone = $("#phone").val();
result1.text("");
if (validatePhone(phone)) {
result1.text("great!");
result1.css("color", "green");
} else {
result1.text("please input phone number");
result1.css("color", "red");
}
}
jQuery(function($) {
$("#phone").on("input", validate);
});
HTML
<label for="phone">电话号码 <span style="color:red">*</span></label>
<input type="number" class="form-control" required id="phone" name="phone">
<span id="result1"></span>
I also suggest you take a look at the css:valid
rule!
https://developer.mozilla.org/en-US/docs/Web/CSS/:valid
英文:
I cleaned up your code a bit, it was mostly ok but you had some small syntax errors and logic errors. Also I suggest using the label
tag. The code can be written even shorter if you want!
function validatePhone(phone) {
if (phone.length <= 10 && phone.length >= 5) {
return true;
} else {
return false;
}
}
function validate() {
let result1 = $("#result1");
let phone = $("#phone").val();
result1.text("");
if (validatePhone(phone)) {
result1.text("great!");
result1.css("color", "green");
} else {
result1.text("please input phone number");
result1.css("color", "red");
}
}
jQuery(function($) {
$("#phone").on("input", validate);
});
HTML
<label for="phone">Phone Number <span style="color:red">*</span></label>
<input type="number" class="form-control" required id="phone" name="phone">
<span id="result1"></span>
I also suggest you take a look at the css:valid
rule!
https://developer.mozilla.org/en-US/docs/Web/CSS/:valid
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论