Trying to only allow 4 numbers in a field - javascript

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.

Related

text field character limit based on number field in same form

I am not sure if this is possible but what I am trying to accomplish is a text field which would have a character limit of 5 characters if a number field in the same form has 5 entered, or whatever number is entered as the limit.
Is there some way to accomplish this?
yes you can do that
you just need to set maxlength attribute on basis of numeric textbox
$("#txtNumber").keyup(function(){
$("#txtBox").attr("maxlength",$(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="txtNumber">
<input type="text" id="txtBox">

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')

HTML Field Type Input Number Only or Letter Only Without JavaScript

I create a form, where one field should only be filled with numbers.
I want that field can be filled only with numbers since entering input.
Like this example :
How Can I Use Javascript to Allow Only Numbers to Be Entered in a TextBox?
I've tried using Regex, but when I try to input is still able to enter letters.
<input type="number" min="2" pattern="^[0-9]" class="andi_input required-entry" name="amount" id="amount" required title='Only Number' />
I want it when input to field and not after click the Submit button and the message appear and inform that the field can only be filled with numbers.
I also try to add validate-number, but the result is the same.
How, without javascript, so that the field can only be filled with numbers or letters?
Whether for this kind of case have to use JavaScript or is there another way without JavaScript?
HTML 5 uses the type="number" so make sure that the browser that you are using is compatible. Check it out in action here.
You should check browser compatibility.
You're right with <input type="number" pattern="^[0-9]" />.
Your regex rule is :
^[0-9] :
^ assert position at start of the string
[0-9] match a single character present in the list below
(0-9 a single character in the range between 0 and 9)
You can check your regex here.
I use to use HTML5 Validation and jQuery one because IE is capricious most of the time.
UPDATE :
Without Javascript it's not possible to check pattern on real time. I suggest you to use a jQuery library like : http://www.jqueryscript.net/form/jQuery-Plugin-For-Formatting-User-Input-with-Specified-Pattern-formatter-js.html.
Here is a OneLiner:
<input type="number" onkeypress="return /[0-9]/i.test(event.key)">
or
<input type="text" onkeypress="return /[a-z]/i.test(event.key)">

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

Combine pattern with maxlength of input field

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.

Categories

Resources