Validate phone in jQuery - javascript

I have this input field that the user need to put his phone number:
<input type="text" id="Phone" />
I want to validate if the number is in the correct format.
The format should be this:
Only 10 digits (no letters, no "-" and no other characters)
Can someone help me please?

There is a plugin for this and it is called 'Jquery mask plugin'. Also there is another question about it here. Check them out.

You can use pattern attribute with RegExp \d{10} , maxlength set to 10, title set to the message to be displayed to user at invalid submission , placeholder set to display message indicating expected format of input
<form>
<input type="text"
pattern="\d{10}"
maxlength="10"
placeholder="Input 10 digits"
title="Input 10 digits" />
<input type="submit">
</form>

Related

How to validate a phone number doesn't contain any other characters including - and . using javascript in a html page, shouldnt be less than 10 digits

This is in Adobe campaign classic.
type="text" maxlength="10" pattern="[0-9]{10}"
It is allowing only 10 digits, but accepting - and .
I want the user to enter only 10 not less or more and accept only digits.
Please help.
You can always sanitize the input using a javascript piece of code.
But as you are asking for a validation, simply use a numeric HTML input with max and min attributes.
E.g.
<input type="number" min="1000000000" max="9999999999">
What you could do is to replace non-numeric characters(\D) after user input:
[...document.querySelectorAll('input[type="tel"]')].forEach(i =>
i.addEventListener('input', () => i.value = i.value.replace(/\D/g, ''))
);
<input type="tel" maxlength="10" pattern="\d{10}" />

Different title when input invalid and input empty

I have an input:
<input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required>
If I input a number, the title will appear. But if I don't input anything, it will give the same error title. How can the title when I input not only letters is different when I doesn't input anyhing?
I think that your problem is similar to the one in this link.
The correct answer there says that:
If you set a value with setCustomValidity() then the field is invalid. That is setting a non-zero length string causes the browser to consider the field invalid. In order to allow for the effects of any other validations you have to clear the custom validity:
<input type="password" name="user_password_new" pattern=".{6,}" required oninvalid="setCustomValidity('Minimum length is 6 characters')" oninput="setCustomValidity('')" />
Here is a working example for your case to see:
<form>
<input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required oninput="setCustomValidity('')">
<button type="submit">Submit</button>
</form>

Australian Mobile number regular expression validation needs to allow space in between number

I need to validate the mobile number
first text input starting with 04
should be total 10 digits including 04(eg : 0412345678)
my input field is below
<form name="uploadForm">
<input type="tel" name="MobileNumber" id="MobileNumber" data-ng-model="ApplicationData.MobileNumber" required maxlength="14" data-ng-pattern="/^(0?4[0-9]{8}/\s)$/">
<span data-ng-show="uploadForm.MobileNumber.$error.pattern">Please enter a valid mobile number.</span>
<input type="tel" name="Number" id="Number" data-ng-model="ApplicationData.Number" required maxlength="14" data-ng-pattern="/(^1300\d{6}$)|(^1800\d{6}$)|(^0[2|3|7|8]{1}[0-9]{8}$)|(^04\d{2,3}\d{6}$)/">
<span data-ng-show="uploadForm.Number.$error.pattern">Please enter a valid mobile number.</span>
</form>
any one can you help me please ?
If I understand this correctly, this is your regex pattern.
^04[0-9]{8}$
^04 - starts with 04
[0-9]{8} - matches the next 8 digits
$ - matches end of string
I think for your first question replace with this regexp. it accepts space in between number.
ng-pattern="/^04(\s?[0-9]{2}\s?)([0-9]{3}\s?[0-9]{3}|[0-9]{2}\s?[0-9]{2}\s?[0-9]{2})$/"
for your second question, its quite long this is what i can come up with at this moment.
ng-pattern="/(^1300\s?([0-9]{3}\s?[0-9]{3}|[0-9]{2}\s?[0-9]{2}\s?[0-9]{2})$)|(^1800\s?([0-9]{3}\s?[0-9]{3}|[0-9]{2}\s?[0-9]{2}\s?[0-9]{2})$)|(^0[2|3|7|8]{1}[0-9]{8}$)|(^04(\s?[0-9]{2}\s?)([0-9]{3}\s?[0-9]{3}|[0-9]{2}\s?[0-9]{2}\s?[0-9]{2})$)/"
any body have interest to modify/short this one.

Angular text form with numbers only?

So I have an input form in Angular here:
<input ng-model="sc.zip" class="form-control" maxlength="5" type="text" />
I don't want type="numbers" because the form needs to be a plain empty textbox. However, I only want the user to be able to type numbers. Either I need to detect when the input is not a digit, or be able to search through the box to find non-digits when submitting.
Either way, I need to validate that the form is digits only. Any help would be appreciated!
use regex
<input name="title" type="text" ng-model="sc.zip" ng-pattern="/^[0-9]*$/" required/>

does jQuery Validation plugin not work with input type number? [duplicate]

I'm trying to setup a "digit" field using the jQuery Validation plugin
The problem is I don't want the digit field to be required, I just want to validate it as digits only, if someone does enter anything into it.
Here is my code, if I remove the "required: true," part, the field no longer throws up an error if I enter text into it and the form gets passed.
$('.js-validate-form').validate({
rules: {
phoneNumber: {
digits: true
}
}
});
And my HTML
<input type="number" name="phone" id="phone" placeholder="Phone (include area code)" value=""/>
Thanks in advance for any help!
This only seems to be a problem with input type="number" fields. It also only works as long as your field name matches your rule declaration, in this case, phoneNumber...
<input type="text" name="phoneNumber" id="phone" placeholder="Phone (include area code)" value=""/>
DEMO: http://jsfiddle.net/L4crh/
However, there are various phone number rules you can use that are already included in this plugin as part of the additional-methods.js file
DEMO 2: http://jsfiddle.net/L4crh/1/
EDIT:
The type="number" bug has reportedly been resolved as of jQuery Validate version 1.13.
https://github.com/jzaefferer/jquery-validation/releases/tag/1.13.0

Categories

Resources