Variable length for input field - javascript

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

Related

Leading zeroes in React input form

I'm new to React and I would like to know how can I insert leading zeroes if the input number is less then 10. I mean, the defaultValue is 00 and, if I type 1, I want a zero to be automatically inserted in front of 1, having 01 in the input tag field. I'm using React Hook Form to manipulate the form.
<input
type="number"
name="Number"
defaultValue="00"
ref={register({ required: true })}
/>
Do you guys have any idea how to do this?
Thank you all!
You can use onChnage event of input element, and manipulate the value in order to add leading zero to your number.
01 is not exactly a number, it is a string. Maybe you should use a text input and not a numeric one.

Can backend data overwrite maxLength for inputField

I am new to React and whole understanding of Front end development. So excuse me if its a silly question.
I have this below html input and its maxLength is specified as 24. So it will only allow user to enter upto 24 characters. If user tries tying anything more, it wont allow and only 24 characters are seen.
<input type="text" maxlength="24" id="sessionNo" name="sessionNum" onkeypress="return isNumberKey(event)" />
Uptil now is ok. But the earlier code had maxLength="32". So users had saved upto 32 characters and that data is stored in Db. When this default value is picked and shown in input field, what will i be seeing ? Will i see truncated 24 characters only or will i see 32 characters initially and as user edits the field, it will truncate additional characters and only 24 characters will be shown. "
Any suggestions highly appreciated
It might depend on the browser, but my local test with chrome says the following: values longer than the max are shown if set programmatically (setting the value of the element), but it is not possible to add characters to the input field. They can only be removed.
This might be different for other browsers.
Thanks to #thespeciamone for the example
<input style = "width: 500px" maxlength = "24" value = "More Than Twenty Four Characters Boi. Also users can inspect element and delete the maxlength setting and now there is no limit.">

HTML input element password pattern with alphabet and number range

I know this may be very simple but I couldn't find anything relevant. I am using the HTML element for accepting the password from the user.
There is a condition for the password to be accepted
It should only contain letters between a to h (0 times or more)
It should only contain numbers between 1 to 8 (0 times or more)
Following the above two conditions the user can come up with any password combination. For example: abc123, 6ad27, hefb etc etc which should be accepted by the input element.
But it should not accept patterns like z00911, ksoql234 etc.
What should be the value for pattern attribute in the following code snippet for checking the above two conditions?
<input type="password" pattern="WHAT-SHOULD-I-PUT-HERE">
I hope someone might help. Thank you
<form action="/blablabla">
<input type="password" pattern="[a-h1-8]+" required="required" title="Wrong password">
<input type="submit">
</form>
In regular expression [a-h] means range of character, you can define multiple ranges in square brackets: [a-h1-8]. If you want to allow repetitions of pattern you add *(0 or more repetitions) or +(1 or more repetition) after pattern. Your pattern for single letter is [a-h1-8] so for password containing at least on character full pattern is [a-h1-8]+. You can read more here.
I have also added required attribute to enforce filling password field, without that attribute user could simply leave password blank.
You can handle this problem easily with javascript functions such as onChange event on your input tag.
Every onChange event you can check the last added character or letter whether meets your conditions.

angularjs input value binding and validation

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

Parse amount in input in Javascript

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.

Categories

Resources