Combine pattern with maxlength of input field - javascript

Is it possible to combine a pattern attribute with a maxlength attribute on an input field in jquerymobile?
<input name="aNumber" type="number" pattern="[0-9]{6}" maxlength="6" placeholder="dddddd" value="">
<input name="anotherNumber" type="number" pattern="[0-9]{3,4}" maxlength="4" placeholder="ddd(d)" value="">
I want the big numberpad to appear but that only works using pattern="[0-9]*". Unfortunately the maxlength attribute is not respected in any case.
What I want is a numeric keypad to appear (the big one/dial; the iPhone apparently has two: only numbers/dial and numbers with special chars) letting the user input up to 6 or 3 to 4 numeric chars.
Edit: Applied #raina77ow 's suggestion and that works for the moment, but still it feels not right so I'm open to advice!
<input name="aNumber" type="tel" pattern="[0-9]*" maxlength="6" placeholder="dddddd" value="">


{6} means exactly 6 Digits
{0,6} means minimum 0 digits and maximum 6 digits


type="tel" pattern="{X,6}" maxlength="6"
if you wanna limit input to strictly numbers (as in math numbers not telephone numbers) go with:
pattern="[0-9]{X,6}"
Where x is an integer number between 0 and 6 will get you the minimum of X and maximum of 6 digits for input.
If you type pattern this way, you need maxlength only for browsers that don't support pattern attribute, I would keep it.

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

Use input number with currency values and keep trailing zeros

I'm using ionic for an iOS app, my issue is that I can't keep trailing zeros in currency values when using an input with type number.
I need input number so the appropriate keyboard opens in iOS. ParseFloat toFixed wont work as it produces a string / exception. If I put the value 25.20 in the input it changes to 25.2, is there any solution to this?
$scope.total = 25.20;
<input type="number" name="total" value="{{total}}" placeholder="total amount" ng-model="total" min="1" max="2500" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01">

How to set maximum number of characters in number type textbox?

I have one textbox which is of number type. I want it to accept maximum of 16 digits, not more than that. For that I have tried with "maxlength" attribue and "max" attribute both. But its not working. Can anyone provide me solution?
<input type="number" id="dummy" max="16" />
Edit: I need to enter only whole number since it is used for account number of bank.

There are a few of these "how do I further control type="number" fields" questions here on SO. It boils down to:
You make it a type="number" and accept that you can't further mask the input vs. what the browser does to implement a numeric input, or
You make it type="text" and use pattern and/or maxlength to enforce the specific pattern you want, and accept that the browser won't add a specific UI for numbers.

Input type number doesn't support "maxlength" attribute. You can specify "max" attribute (HTML5), which is the highest number user can input. Something like this: <input type="number" max="999999999999" id="dummy" step="1" min="0">.
Edit: Also specify step attribute to 1.

html regex validation limit only one period on decimal input

I made a HTML input which accepts decimal only.
<input type="text" class="form-control" id="price" name="price" placeholder="Price"
onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')">
This is working. However I need to modify the regex to accept only one period
Correct: 9.999
Wrong: 9.9.99.99
Is there a way? please don't use jquery validate and html type="number" (Users doesn't want the up and down arrow when you set the input to type number) Thanks

Sharing this answer to limit one period on decimal input
replace
this.value=this.value.replace(/[^0-9\.]/g,'')
with
this.value=this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')

Trying to only allow 4 numbers in a field

I am trying to make sure only to validate 4 digits which can only be numbers in a field, and letters cannot be accepted. Its for this field.
<tr>
<td id="Exam_Number">Exam Number</td>
<td><input type="text" name="Exam_Number" /></td>
</tr>

Helpful answer here
Specifically, you'd want to change your input element to:
<input type="text" maxlength="4" pattern="[0-9]{4}" title="Four digit test number" name="Exam_Number"/>
AND use jQuery to only allow digits as shown here
$("#myField").keyup(function() {
$("#myField").val(this.value.match(/[0-9]*/));
});

If you are using PHP, use strlen() for checking the string lenght and is_numeric() for checking that they are numbers.

Setting the input attribute maxlength="4" will restrict the number of characters entered to 4.
If your audience is exclusively html5 you can change the input type to "number", otherwise it's going to be a matter of validation and user alerts.

Categories

Resources