My database table column length is (13,3),
I'm using HTML maxlength for normal text and number text boxes.
But i cannot use that for decimal number validation, is there any way i can use maxlength property of HTML to validate this?.
You could use the HTML text input pattern attribute.
For example :
<input type="text" placeholder="0.000" maxlength="14" pattern="\d{1,10}(?:\.\d{1,3})?$" />
This pattern will validate these :
1
1.001
1234567890
1234567890.123
And will through error for these :
1.
1.1234
12345678901
.123
Related
I am trying to put value in text box with two decimal digits
example
by default it take .00 on entering number
I am using Angular , Reactive form with form Control .
I am sharing my code :
<input placeholder="00.00" (keypress)="convert($event)" formControlName='pendingDuesAmount' [(ngModel)]='pendingAmount' type="text" [ngModelOptions]="{standalone: true}" >
TS
pendingAmount : number = 0.00
convert(event): boolean {
this.pendingAmount.toFixed(2)
}
I have a form which I am trying to get working with autonumeric.js. One of the errors I am getting is that number is not supported by autoNumeric. When I change the input type to text all inputs automatically auto fill to whatever number I am keying in. I am basically trying to start with adding commas and decimals, before i get into currency. I am a little confused as to where to go from here. This is my HTML
<form id="form1">
<h3>Lifetime Value Calculator</h3>
<input value="" type="number" class='num1'/>
<input value="" type="number" class='num2'/>
<input value="" type="number" class='num3'/>
<input value="" type="number" class='num4'/>
</form>
This is my script
var autoNumericInstance = new AutoNumeric('.num1, .num2, .num3, .num4', AutoNumeric.getPredefinedOptions().numericPos.dotDecimalCharCommaSeparator);
$('.num1, .num2, .num3, .num4').on('keyup', function() {
$('.num1, .num2, .num3, .num4').val(autoNumericInstance.getNumericString());
});
I have made some progress. I was able to get commas and decimals for my first input field, but only commas and NO decimals for my last input field, using this script
`
$('.num1, .num4').each(function() {
var autoNumericInstance = new AutoNumeric($(this)[0],AutoNumeric.getPredefinedOptions().numericPos.dotDecimalCharCommaSeparator);
});`
So now I need to figure out why the decimal is not working for my fourth input
What do you want to achieve exactly?
If you want to have 'basic' input with the usual comma as the digit group separator and the dot as the decimal point, then just use:
new AutoNumeric.multiple('#form1 input');
On the other hand, if you only want positive values, use:
new AutoNumeric.multiple('#form1 input', { minimumValue : 0 });
Lastly you were mentioning currency; I would suggest using on the the predefined currency format, and if you do not find yours then 1) ask for it to be included in the AutoNumeric library using the github issues, and 2) just configure it as you wish, for instance like:
new AutoNumeric.multiple('#form1 input', { currencySymbol : '€' });
Do note that you can fiddle with the options pretty easily using the official autoNumeric configurator.
I need to enter 0.00 to 100.00 in text field using jquery regular expression. I am new for regex. Please help me how can I do this?
I do not allow to enter more than 100.00 or negative values.
var regex = "^\$(\d{1,3},?(\d{3},?)*\d{3}(\.\d{1,3})?|\d{1,3}(\.\d{2})?)$|^\d{1,2}(\.\d{1,2})? *%$|^100%$";
<input type="text" class="count">
How can I use this regex in textbox. I just want t allow only two numbers after decimal. Example (0.00 and 100.00 or 99.99) like this.
For modern browser is sugest the input type number
<form>
<input type="number" class="count" min="0.00" max="100" step="0.01">
<input type="submit"></form>
I am having a issue validating phone number. The phone number is a 10 digit string that should be populated in a three input field
1st input field - have only 3 digits only ( requires, can accept only numbers and max length 3)
2nd input field - have only 3 digits only ( requires, can accept only numbers and max length 3)
3rd input field - have only 4 digits only ( requires, can accept only numbers and max length 4)
and tab should be moved to next input field, when maximum number of characters have been implemented in the first one
the fields should be red, when none of the above conditions are not meeting
<label for="phoneone" aria-label="Enter First 3 digits of your phone no."><input id="phoneone" type="number" required name="phoneone" class="phone-text-box" ng-model="user.phoneNumbercodeone" ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/"></input></label>
<label for="phonetwo" aria-label="Enter second 3 digits of your phone no."><input id="phonetwo" type="number" required name="phonetwo" class="phone-text-box" ng-model="user.phoneNumbercodetwo" ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/"></input></label>
<label for="phonethree" aria-label="Enter last 4 digits of your phone no."><input id="phonethree" type="number" required name="phonethree" class="phone-text-box" ng-model="user.phoneNumbercodethree" ng-minlength="4" ng-maxlength="4" maxlength="4" ng-pattern="/^[0-9]*$/"></input></label>
<div class="clearfix" ></div>
how would i achieve the above validation conditions using input html tag
You should use input pattern validation. This can be done using the ng-pattern directive:
NgPattern sets pattern validation error key if the ngModel value does not match a RegExp found by evaluating the Angular expression given in the attribute value. If the expression evaluates to a RegExp object, then this is used directly. If the expression evaluates to a string, then it will be converted to a RegExp after wrapping it in ^ and $ characters. For instance, "abc" will be converted to new RegExp('^abc$').
Note: Avoid using the g flag on the RegExp, as it will cause each successive search to start at the index of the last search's match, thus not taking the whole input value into account.
There are a couple of small issues with your code. Specifically I am looking at ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/". You can achieve your number validation using the html5 properties of min and max on your input. So your input would look something like this:
<input id="phoneone" type="number" name="phoneone" class="phone-text-box" ng-model="user.phoneNumbercodeone" ng-minlength="3" ng-maxlength="3" min="100" max="999" />
And then you can run validations against that using something like this:
<div ng-show="phoneForm.phoneone.$invalid && phoneForm.phoneone.$dirty">
<div ng-show="phoneForm.phoneone.$error.minlength || phoneForm.phoneone.$error.maxlength">This must be a 3 digit number</div>
</div>
Of course exchanging out phoneForm for the name of your form.
I am trying to implement input number field which will allow positive or negative numbers.
I have used "/^0|[1-9]\d*$/" regex expression for ng-pattern.
But it is not working.For character input it is not showing any error.
I have pasted my code here.
Update
I don't want to make this field as required.I just want only number validation(charters are not allowed).
There are a couple of problems with your code:
The pattern /^0|...$/ is interpreted as /(^0)|(...$)/. So, your pattern will accept any string that either begins with 0 (no matter what follows) or ends with any digit in [1-9] (optionally followed by any number of digits).
The correct pattern is: /^(0|[1-9][0-9]*)$/ (note that \d will match more characters than [0-9], e.g. arabic digit symbols etc).
The input elements of type number are handled in the following way by the browser:
If their content is not a valid number, then their value property is set to ''.
Thus, entering 1w3 will cause the value to be an empty string, so then pattern will not be applied.
You should use an input element of type text.
(This is not directly related to your question, but I noticed in your fiddle, you were using <form>.<input>.$invalid, instead of the (probably) intended <form>.<input>.$valid.
$invalid is a property of the FormController only.)
Based on the above, your code should look more like this:
<input type="text" name="price_field" ng-model="price"
ng-pattern="/^(0|[1-9][0-9]*)$/" />
(For accepting negative numbers as well, change ng-pattern to /^(0|\-?[1-9][0-9]*)$/.)
See, also, this short demo.
(UPDATE: The demo has been updated to illustrate the differences between number- and text-fields and between different patterns.)
Why do not use required with min. So we can write:
<div ng-app ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit()">
<input type="number"
ng-model="price"
ng-init="price=0"
name="price_field"
min="0"
required
>
<span ng-show="myForm.price_field.$error.required ||
myForm.price_field.$error.min">Not a valid number!</span>
<input type="submit" value="submit" />
</form>
</div>
Demo Fiddle
Howevewr if you still want to use pattern, remove type="number". I'm not sure but sounds like type number has own pattern, this is a reason why it doesn't work.
Here is 2nd Demo Fiddle
used htm5 pattern for input number only
<input type="number" name="country_code" pattern="[0-9]" >
http://www.w3schools.com/tags/att_input_pattern.asp