I've few doubts/huddles for my page
1). I've a input control. It should only allow user to enter between 1 to 5. If user tries to enter maximum of 5, error should be thrown.
will ng-pattern="/^[1-5]*$/" correct?
<input type="text" ng-model="MovieRating" class="form-control" name="MovRate" ng-pattern="/^[1-5]*$/" required />
<span ng-show="adduserform.MovClafictn.$error.pattern" class="spnmsg">Rating should be 1 to 5</span>
2)Have one more input control which should be entered 4 digits only. Less than that/More of it should trigger validation. (Actually this control for entering year value)
ng-pattern="/^\d{5}$/"
This will allow user to enter only 5 digit number.
You can also make use of ng-maxlength as well for specifying the length and input type="number" for allowing only numbers.
Similarly if you want to allow only between 1 to 5, then set min="1" max="5" in your input type="number"
Regarding valid year:
ng-pattern = "/19[789]\d|20[01]\d/g"
This will allow from 1979 to to 2019
Else even simple ng-pattern = "^(19|20)\d{2}$" will match from 1900 to 2099
Related
I know we can restrict the user to enter numbers less than specific max number by below code.
<input id="txt" max="9999" type="number">
If user enters anything more than 9999 a tooltip will appear above textbox asking user to enter number less than 9999. Is there way to restrict user to enter only max 4 numbers in textbox. System will not allow numbers enter any thing in text box after 4 digits are entered.
This is working with normal texbox using below code but for numeric textbox, system allows to enter n digits.
<input id="txt" maxlength="4" type="text">
P.S. I have already done validation using Jquery, if user enters more than 4 digits, system will notify users. My requirement is user should not be allowed to enter 5th digit at all.
You can use Jquery
$("#txt").blur(function() {
if ($('#txt').length > 4) {
$('#txt').before('your notice');
}
});
I am pretty new in HTML and I have the following problem. Into a page I have an input tag like this:
<input id="codiceFiscaleEnte" class="form-control" name="numeroProtocollo" type="number" th:value="*{codiceFiscaleEnte}" required="required"></input>
and I have to do some validation on it.
So I know that the required="required" attribute means that the user have to insert a value for this field and that the type="number" specify that this value have to represent a number.
Can I specify in some way that this number has to be composed by exactly 11 digits? How can I do it using HTML attributes?
Use pattern:
<input type="text" name="numeroProtocollo" required pattern="[0-9]{11}">
It allows only numbers with a minimum and maximum length of 11
Test it:
https://jsfiddle.net/oegjdszx/1/
Use the pattern like this
<input pattern="[0-9]{5}">
Where 5 is the number of digits that you want.
<input type="number" min="10000000000" max="99999999999" required>
min and max attributes specify the smallest and largest valid values. An 11 digit number is a number between 10^10 and (10^11 - 1), so set min and max to those values
The user signs up and enters mobile number, which must be of the proper format written (e.g countey code should be included)
the proper number that is acceptable is: +16174552211
here is the input field
<input type="text" class="form-control" name="phone" pattern="[+][0-9]{1,10}" placeholder="+16174552211">
What it does is, verifies the number starting with plus sign followed by 10 exact digits, but i need to define a range so that user can enter numbers lets say from 10 to 12, how is that possible with this pattern?
<input type="text" class="form-control" name="phone" pattern="\+[0-9]{10,12}" placeholder="+16174552211">
I need to have users enter floating point numbers, so I use the following element:
<input type="number" name="my_number" placeholder="Enter number"/>
Works great on Firefox, but Chrome complains that the number is not an integer when I try to enter a decimal. That's a problem for my case. If I enter a step attribute, then Chrome allows the floating point number:
<input type="number" name="my_number" placeholder="Enter number" step="0.1"/>
But then the problem is 0.15 can't be entered... The step doesn't appear to suit my needs. The W3C spec mentions floating-point numbers throughout the attributes of input type="number".
How do I get Chrome to accept floating point numbers without the step attribute?
Try <input type="number" step="any" />
It won't have validation problems and the arrows will have step of "1"
Constraint validation: When the element has an allowed value step, and
the result of applying the algorithm to convert a string to a number
to the string given by the element's value is a number, and that
number subtracted from the step base is not an integral multiple of
the allowed value step, the element is suffering from a step mismatch.
The following range control only accepts values in the range 0..1, and
allows 256 steps in that range:
<input name=opacity type=range min=0 max=1 step=0.00392156863>
The
following control allows any time in the day to be selected, with any
accuracy (e.g. thousandth-of-a-second accuracy or more):
<input name=favtime type=time step=any>
Normally, time controls are
limited to an accuracy of one minute.
http://www.w3.org/TR/2012/WD-html5-20121025/common-input-element-attributes.html#attr-input-step
Try <input type="number" step="0.01" /> if you are targeting 2 decimal places :-).
Note: If you're using AngularJS, then in addition to changing the step value, you may have to set ng-model-options="{updateOn: 'blur change'}" on the html input.
The reason for this is in order to have the validators run less often, as they are preventing the user from entering a decimal point. This way, the user can type in a decimal point and the validators go into effect after the user blurs.
Try this
<input onkeypress='return event.charCode >= 48 &&
event.charCode <= 57 ||
event.charCode == 46'>
I want to prevent the user from entering non-numeric characters in a textfield for telephone number in HTML5. I tried this, but it doesn't forbid non-numeric characters:
<input type="tel" name="usrtel"><br>
I tried using type=number as well, but that gives me a up and a down arrow to increase or decrease the value, which is not useful for telephone numbers. How can I accomplish this?
You can use pattern attribute with a regex \d*
<input type="tel" name="usrtel" pattern="\d*" />
Demo (After typing in the box, just click anywhere outside the box, if you type in anything except the integers, it will show a red box, else it will stay normal)
Demo 2 (With custom message and submit button)
As you commented, you can change your pattern value to ^[0-9]{3,45}$ where user will have to input minimal of 3 digits to maximum of 45 in length.
Demo
<input
type="tel"
name="usrtel"
pattern="^[0-9]{3,45}$"
title="You can only enter numbers, with a minimal of 3 characters
upto 45 characters are accepted."
required="required"
/>
In the above markup, am using a title which will throw a custom error to your user.