Could you please tell me how to restrict user to enter only 10 characters in mobile field.I already used
maxLength={10}
.but it not working .here is my code
https://codesandbox.io/s/quizzical-hellman-65dy3
<RFField
component={SForm.Input}
label="Number"
name="number"
type="number"
maxLength={10}
placeholder="Please Enter full NUmber"
validate={required}
/>
You can use regex pattern
/^\d{10}$/
Demo
If you want to limit the max char in the input you need to change your code like this
<input type="text" pattern="\d*" maxlength="10">
Related
Why does the input field allow alphabetic characters and not restrict the input to only numbers?
<input type="tel" id="phone" name="phone_number" placeholder="555-555-5555" pattern="\d{3}-\d{3}-\d{4}">
Because many country use char in the phone numbers like ’+-()’ space etc.
It does not restrict the types of characters that can be input, but browsers will prevent submission if the input value does not match your pattern.
If you do not want to allow certain character inputs, you can use JavaScript to remove those characters: onkeyup="this.value = this.value.replace(/[^0-9-]/g, '');".
input:invalid {
color: red;
}
<form>
<input type="tel" id="phone" name="phone_number" placeholder="555-555-5555" pattern="\d{3}-\d{3}-\d{4}" onkeyup="this.value = this.value.replace(/[^0-9-]/g, '');">
<input type="submit" value="Submit">
</form>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel
Andy's link to the documentation had the answer I was looking for.
the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world
I have an input where the user can enter an phone number (national format) value. The "09" numbers are part of the phone number of the input field so the user only needs to enter the rest of the phone number. I'd like to have the "09" numbers as html and make it unselectable/uneditable. Is this possible?
It will help if you showed what you tried as well. but not knowing that, will the below work for you?
<label for="tel">09</label> <input id="tel" type="number" placeholder="Enter your telphone number">
you can also achieve this in bootstrap way as described here
I have the code for a number field:
<label for="Phone">Phone Number</label><br/>
<input id="Phone" name="Phone"class="form-control" type="tel" pattern="^\d{3}\d{3}\d{4}$" maxlength="10" minlength="10" required >
However that doesn't limit to only numbers and only one format works i want to do something like:
<input name="Phone" type="number" class="form-control" placeholder="Phone Number" maxlength="10" minlength="10" required="required"/>
and that code does not limit the max and min lengths!
How do i get the lengths to work?
From the mozilla docs:
If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter. For other control types, it is ignored.
That means that this attribute does not work as expected for a number input.
Here's one way you can define your own length-validator (of course you can write your own ;) ):
numberInput.addEventListener('input', function() {
this.value = this.value.substring(0, MAX_LENGTH);
}
I want to add a form for entering Mobile Number. But want to ask the user to enter the country code as well so that a verification SMS can be sent over the number.
What I want is:
Enter Your Mobile Number. : |(country code)| |(mobile no.)|
How can I do this?
sample code:
<input class="input" ng-model="countryCode" placeholder="Country Code"></input>
<input class="input" ng-model="mobileNumber" placeholder="Mobile Number"></input>
I need to validate a text box.user should not enter any mail id and also no numbers lengthier than 10..Please give your suggestions
As everyone else is commenting, please try to do some research before posting your question, as all of the below answers have been taken from this site's previous answers only.
Your query can be divided into two parts -
Email Validations
You can find email validation scripts already answered here and here on StackOverflow.
For PHP server-side validations, taken from here.
function validateEmail($email) {
return (bool) stripos($email,'#');
}
All the above functions will return true if the text entered is an email. So you might probably need to check for a false condition as you do not want email addresses to be entered.
Number Validations
Similarly, the check for numbers not being entered more than 10 characters, you may use:-
Simple
Javascript validation can be found here
However, there are still some unhandled cases in your question - What happens when someone enters normal text but greater than 10 characters? Should this be allowed?
Ideally it should as it is not an email, it is not a number greater than 10 digits?
<label>
Student Mobile no :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="tel" name="phone" size="10"/> <br> <br>
<label>
Guardian Mobile no :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="tel" name="phone" size="10"/> <br> <br>
<label for="email">Email :</label>
<input type="email" placeholder="Enter Email" name="email" required>
Just use either maxlength for text type input attribute inside the input tag of HTML forms or use size attribute for phone type input attribute the same.
For the email validation use type = "number" attribute in the input tag of HTML forms.
Please refer to the code above.