two First characters in input unselectable/uneditable and must be 09 - javascript

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

Related

Why does input[type='tel'] allow non-numerical characters to be entered?

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

how to restrict user to enter only 10 characters in mobile field

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">

parsley.js wrong data-type

I have a form that's being validated by parsley, but parsley seems to be screwing up. The element in question is defined like this:
<input class="num-selector" type="tel" name="gift_amount" data-min="20" data-type="digits" required>
However, stepping through the debugger reveals it's being validated as data-type="phone", which causes validation to fail. (Unless somebody is buying a gift certificate worth over a billion dollars, but that's clearly a fringe condition.)
Has anybody heard of anything like this -- parsley screwing-up the data-type? Ever run into code that picks a fight with parsely.js and corrupts its data like this?
The problem is because you use type="tel" in your input and parsley automatically recognizes it as phone number, not digits. Should be:
type="number"
Or just text.
Also there is no such attribute as data-type, you should use data-parsley-type="digits" instead. Same with data-min should be just min or data-parsley-min="20"
So your code can be:
<input class="num-selector" type="text" name="gift_amount" data-parsley-min="20" data-parsley-type="digits" required>
Look at the Validators list on official documentation.

Validation to check any email id or 10 digit numbers

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.

Mobile Safari - How to Default to Full Numeric Keypad for Decimal Entry w/o type="number", or disable Safari input type="number" correction

I have a fairly basic but frustrating problem, essentially I've been trying to force input fields to behave more like text input types (where they do not correct incorrect number entries, such as "0..7" to truncate to "0") and just let JS form validation and backend validation do its job. However, while I want to allow the user to enter whatever they want in the field (input type="text"), I want to FULL numberpad keyboard to display.
Original:
<input type="number" name="test" class="answers" id="mileage" value="0.0" maxlength=5 />
Attempts to fix:
Works on iPad, but NOT on iPods, as iPods display the compact number pad WITHOUT decimal points:
<input type="text" name="test" class="answers" id="mileage" value="0.0" maxlength=5 pattern="\d*"/>
Doesn't work on iPod, as it displays the full text keyboard, but doesn't default to the "number side" of the full keyboard with a decimal:
<input type="text" name="test" class="answers" id="mileage" value="0.0" maxlength=5 pattern="\d+(\.\d*)?"/>
Anyone have any ideas? Either to prevent Mobile Safari from correcting input number types (number types display the correct keyboard on iPods and iPads, but has built in correction on fields when the keyboard hides), or to force the keyboard to be on the Number side of the full iPod keyboard?
FYI:
This sounds very similar to my issue, however I may need a different solution. Sounds like they desired the "Full" numeric keyboard to appear by default but without number autoformatting that Safari does on the field when entering other characters in.
Force a numeric keyboard but allow punctuation: HTML5, mobile Safari
I know this is old but I see this being asked quite a lot.
To prevent validation of the number input type (and other types) you can use the novalidate attribute on the <form> element:
<form novalidate>
<input type="number" name="test" class="answers" id="mileage" value="0.0" maxlength=5>
</form>
You'll still get the numeric keyboard but it won't force the user to enter numbers only.

Categories