i had a job interview and they gave me to make a landing page with a validation on the phon number that he will be between 9 to 10 numbers length and make another validation that the phon number must start with the number "0" and all of this with contact form 7 , some who how to do it ?
There will be an id for the phone number field in the contact form 7 for example (phone -number)
To set max number of digits :
<script type="text/javascript">
jQuery("#phone-number").keypress(function(ev){
$("#phone-number").attr('maxlength','10');
});
</script>
To set 0 as 1st digit :
<script type="text/javascript">
jQuery("#phone-number").keyup(function(ev){
var x = $(this).val();
if(x.indexOf('0')!==0){
$('#phone-number').val('');
}
jQuery('#phone-number').bind('input propertychange', function() {
var x = jQuery(this).val();
if(x.indexOf('0')!==0){
jQuery('.val_msg').show();
}
else{
jQuery('.val_msg').hide();
}
});
});
</script>
Also add the following line or edit your button accordingl, example:
<input type="text" name="reg_phno" id="phone-number" required><span class="val_msg" style="display: none;">Please Start Your Number with 0 & maximum of 9 or 10 Numbers</span>
You can try this shortcode in contact form 7 for phone number validation with length and number validation : [tel* tel-964 minlength:9 maxlength:10]
Related
I have an input.
<input id="phoneNumber"/>
How can I validate if the inserted value from user is a valid phone number or not using jQuery ?
Thanks.
You can use oninput to check if input has some values entered or not.
When 10th value is entered you can use a alert but this will not be enough because after alert, user can still enter more values. So use maxlength="10" to allow only 10 numbers.
Also if you don't want to allow text but numbers only than you can use .replace(/[^\d]/, '') to replace any non-number . And show that it is not a number.
function validPhone(phoneNum)
// check for valid phone numbers in the format 999-999-9999
{
if (phoneNum.value.match(/[^\d]/)) {
phoneNum.value = phoneNum.value.replace(/[^\d]/, '')
document.querySelector("#demo1").innerHTML = "Sorry numbers only";
} else {
document.querySelector("#demo1").innerHTML = "";
}
var strPhone = phoneNum.value;
var rePhone = /\d{3}-\d{3}-\d{4}/;
if (strPhone.length >= 10) {
phoneNum.select();
document.querySelector("#demo1").innerHTML ="No more numbers plz, only 10 digits allowed in Phone number.";
}
document.querySelector("#demo").innerHTML = strPhone.length;
};
#demo1 {
color: red;
}
<input class="form-control" oninput="validPhone(this)" type="text" name="username" placeholder="Enter Phone number" maxlength="10" id="phoneNumberForForgotPassword" data-val-required="نام کاربری را وارد نمائید.">
<div id="demo1"></div>
<div id="demo"></div>
If any one type in input box only number like : 01234567890 (total 13 digit with country code) then automatically add 88 before mobile number but if if anyone number with 8801234567890 it wont added before number. Another one if type 1234567890 total 10 digit then add 880 before number. how to fix it? I tried with add value but its not working. I need only my conditions not every time.
$(document).ready(function() {
$('#phone').keyup(function() {
let total_length = this.value.length;
if(total_length='11'){
$("#phone").val("88"+$("#phone").val());
}
else if(total_length='10'){
$("#phone").val("880"+$("#phone").val());
}
else{
$("#phone").val();
}
});
$.validator.addMethod("countryValid", function(value, element) {
return this.optional(element) || /^(?:\+88|88)?(01[3-9]\d{8})$/i.test(value);
}, "Please enter valid phone no.");
$("#my_form").validate({
rules: {
phone : {
required: true,
number: true,
countryValid: true
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<form id="my_form">
<input type="text" name="phone" id="phone" />
<br><br>
<button type="submit">Submit</button>
</form>
Fixed it with replace keyup to change and add the ==(Equal to) from =(assignment operators)
$('#phone').change(function() {
let total_length = this.value.length;
if(total_length=='11'){
$("#phone").val("88"+$("#phone").val());
}
else if(total_length=='10'){
$("#phone").val("880"+$("#phone").val());
}
else{
$("#phone").val();
}
});
Thanks #CherryDT for this help.
I have a form in which I have a field where the user enters their phone number and we force them to start with +34 followed by 9 digits (12 digits in total are what that field should have), but then when I change at +31 for example I pick it up as if it were +34, this is using a
<input type="text">
This is a variable
let phone2 = phone.length
This is the contidion I am using in Javascript
if (phone != '+34' & phone2 < 12) {
evt.preventDefault ();
alert ('The phone number must start with +34 and have at least 12 digits');
}
If anyone can help me
Try this:
Note that onblur means that the test function will fire when the input field loses focus. So, to run the test, type something and then click outside the input field.
const $ = document.querySelector.bind(document);
function test() {
const phone = $('input').value;
if (phone.substr(0, 3) !== '+34' || phone.length < 12) {
alert('The phone number must start with +34 and have at least 12 digits');
} else {
alert('good job');
}
}
<input onblur="test()" placeholder="Phone (must begin with +34)" />
I am having a textbox and a div in my form like this :
<input type="text" name="NContact" placeholder="New Contact No." id="txtNewContact"/>
<div id="divCheckContact">
Now on every key press of a key in NContact I need to check if the value entered is a number or not and also it is 10 digit number.And display message in the divison
How to do it Please help.
You can add a pattern and title to do this:
<input type="text" pattern="\d{10}" title="Type 10 digits please" />
The above will check for 10 digit number and if it isn't valid the title will be displayed.
Demo
Note: This is part of html5 spec. Will not work for IE 9 and below.
You can also do it in pure js:
var elem = document.getElementById('txtNewContact');
elem.onkeydown = function(){
if(!/\d{10}/.test(elem.value)){
alert("Type 10 digits please");
}
}
use this
Example
$('#txtNewContact').keyup(function(){
var re = isNaN($(this).val());
if(!re)
{
$('#divCheckContact').html("");
}else
{
$('#divCheckContact').html("please enter only numbers");
$(this).val('');
}
if($(this).val().length>10)
{
$('#divCheckContact').html("please enter only ten 10 digits contact no");
return false;
}
});
For my studies I need to create a simple script that checks if the entered data (suppose to be a 5 digit zip code) actually has 5 digits. If more or less then 5 digits entered, a alert should pop up.
So far I managed to get the alert for more and less then a 5 digit entry, but even when entering 5 digits, the alert will come up as well.
Since js is not my favourite subject I am lost, even tho it seems to be a simple thing.
Thanks in advance for answers and hints.
<script type="text/javascript">
<!--
function CheckZip ()
{
var content = document.forms['zipfield'].Field.value;
var length = content.length;
if (length >=5) (alert('Please enter a 5 digit zip code!'));
else if (length <=5) (alert('Please enter a 5 digit zip code!'));
else (length ==5) (alert('Valid entry'))
}
//-->
</script>
</head>
<body>
<div align="left">
<p>Please enter a 5 digit zip code</p>
<form name="zipfield" action="post"><input name="Field" size="5">
<br />
<br />
<input name="check" value="Check entry" onclick="CheckZip()" type="submit">
</form>
How about this:
if (content.length !== 5) {
alert('Please enter a 5 digit zip code!');
} else {
alert('Valid entry');
}
Check your condition..
When length is 5 it will go to the first if statemenet because you have specified it to be
>= 5
So when length is 5 , it will never hit the statement else (length ==5)
if (length >5) {
alert('Please enter a 5 digit zip code!')
}
else if (length <5) {
alert('Please enter a 5 digit zip code!')
}
else (length ==5) {
alert('Valid entry')
};
Better
if( length === 5){
alert('Valid entry');
}
else{
alert('Please enter a 5 digit zip code!');
}
Check Fiddle
You have other syntax errors in your script
if (length >=5) (alert('Please enter a 5 digit zip code!'));
--^-- Supposed to be { --^-- supposed to be }
Also you are ending the if loop with a semicolon ; .. Need to remove that ..
Otherwise the statement in else if and else will never be executed
5 is greater than or equal to 5, so the error alert will come up.
You should be using > and <, instead of >= and <=.
>= means greater than or equal to, <= means less than or equal to. Your problem is that if your input is exactly 5 characters long then:
if (length >=5)
Will evaluate as true, and you won't get to your else statement.