I have an input in my form where the user have to write an amount to pay. The problem is that the user have different ways to do it, it could be 1,350.55 (this is he correct one), but it could be something like this 1.350,55 or 1.350. So, is there any way to parse the amount to my correct form?
Thanks!
You want to parse the input, right?
Why not try to make the input a currency field?
And then parse it into a container through angular, so that customers may see the value and then work with the angular filtered value.
Here is a fiddle:
http://jsfiddle.net/lacrioque/vouLmrac/
<p><label for='numberinput'>Your Price here: </label><input type='number' name='numberinput' ng-model='numbertofilter' placeholder="1,350.99"/></p>
<p>Price: <span>{{numbertofilter | currency }}</span></p>
If you don't know the format, how would you parse 13.995? Would it be "13955" (an integer) or the float one?
You may instead want to mask the format and avoid thousand separators entirely. And tell the user not to use them.
Use ng-pattern
Attach ng-pattern to your input and feed it a RegEx of your required pattern. This way people will only be able to input in the correct way and you can avoid bad data.
Please check out this link for more information on input formatting.
Example
Here I have an example for any whole number up to 9999999 its very simple if you understand RegEx
<input type="number" ng-model="price" name="price_field"
ng-pattern="/^[0-9]{1,7}$/" required>
Note
You can check your RegEx here.
Related
Im using an angular 1 app.
I have this field:
<input type="string" maxlength="4" ng-model="account.myNumber" />
This field should only accept integers. I think that if I use "type=number" some browser will display the field in a strange way with some kind of selectbox to change the numbers in the field. So I think it's best to have a regex to only allow numbers.
However, this field has a maxlength of 4 characters ONLY IF the first character is not equal to 0.
If the first entered character is 0, then the maxlength should be 5.
What I wonder if there is some regex to solve this. Or should I let the controller check this? I think it would be neater with a regex if it is possible to let it calculate that.
You can use the HTML5 pattern attribute to accomplish this:
<input type="string" pattern="^0?[0-9]{0,4}$" ng-model="account.myNumber" />
I have an input field of type text. Users should only be allowed to enter digits in the field. If they attempt to enter a non-digit, like a character, it should be ignored and not display in the field ( and not submitted to the server). I thought I could achieve this with the HTML5 pattern attribute:
<input class="form-control" data-remote="true" data-url="/contacts" data-method="put" pattern="^[0-9]*$" type="text" value="123456" name="contact[phone]" id="contact_phone">
But it doesn't work as expected. I can still enter any character into the field. There is no form submit button here. As soon as they tab out of field, the ajax call is made.
How can I achieve what I want with html5?
So you can totally do that by adding type="number" to your input field, It'll work in most browsers.
I'd recommend using sort of regex and a bit of JS to evaluate the input and then replace the input with permitted characters.
var phone_input = document.getElementById('contact_phone');
function validDigits(n){
return n.replace(/[^0-9]+/g, '');
}
phone_input.addEventListener('keyup', function(){
var field = phone_input.value;
phone_input.value = validDigits(field);
});
Here's a quick codepen
I'd also put a bit of validation on the model, just in case someone bypasses the JS.
I think it won't work with plain html5 since the pattern goes into affect after you submitted the form (It will make validation fail). But since you are already using js, you can just do it with for example the jQuery.keypress() function.
I'm trying to create a HTML duration(not time of day) input field, ie HH:MM, and I would like it to trigger the numeric keyboard on mobile devices.
<input type="number" /> appears to be the only reliable way to make this happen. But I require it to accept colons :.
Is there a way to force the number input field accept additional special characters?
As far as I know, it's not possible. As you need the numeric keyboard on mobile device along with : is not native at all. There is just no : key in the keyboard, nothing you can do about it.
Just use <input type=time>
and you can make magic happen nicely on mobile device. If you need the user to type in, use number or text, and add additional pattern property to perform the validation. Or use something like jQuery validation plugin
to perform just in time validation.
Try for HH:MM entry and H:MM entry
<EditText>
android:digits="1234567890:"
android:inputType="textNosuggestions"
android:minLength="4"
android:maxLength="5"/>
If you want to prevent users from entering time like "91:87", or ":36" or ":3:4" and all such variations then you would have to use a TextWatcher like this edistext.addTextChangedListener(new TextWatcher(this));
I have a dynamic regExp and dynamic masks for each input. For example: regExp is [0-9]{9,9} and mask is XXX-XX-XX-XX. Of course for angular's pattern validation it is incorrect.
Is it possible, that angular somehow deem this value correct? For example: 222-22-22-22
If i understand your problem correctly , you can use ui-mask for this .
<input id='ui-mask' name="date" ng-model="date" required autocomplete='off' ui-mask='"99-99-9999"'>
This would mask the input as the given pattern of number. Here is a jsfiddle sample . Hope this would help you.
If you are using HTML5, you can use the "pattern" attribute for input and let the browser do the rest. Obviously, with AngularJS, you can let this attribute to be dynamic. Look at the code above:
<input type="text" pattern="{{mc.pattern}}" ng-model="mc.model">
If the user inputs an invalid text then the input (and form) will be not valid.
Let me know if I can help you better.
Bye
I'm trying to create an input field for a phone number. I would like the placeholder to show the expected format/pattern: (XXX) XXX-XXXX as shown below.
Phone Number: <input type="text" name="phone" placeholder="(XXX) XXX-XXXX">
However, when the user starts entering numbers, I'd like them to simply replace the individual X's.
After inputting a few numbers the field would look like this (cursor after the 4)...
"(302) 4XX-XXXX"
And then the user entering backspace would simply replace the last number entered with an X again. After 2 backspaces...
"(30X) XXX-XXXX"
I've seen this behavior before in registration forms, but I haven't been able to locate any examples lately. I was hoping there might be a decent jquery plugin that accomplishes this, but I have not found it yet.
You can use a Mask, with jQuery:
jQuery(".maskPhone").mask("(999) 999-99999");
You can grab a plugin here: http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.js
The Masked Input Plugin will do what you want. http://digitalbush.com/projects/masked-input-plugin/
You may be able to use something like the Mask Input plugin in JQuery
http://digitalbush.com/projects/masked-input-plugin/
Or
http://digitalbush.com/projects/watermark-input-plugin/.