Develop Reference

Is there a way to copy validation from one input to another with JavaScript?

I have a client who wants me to punctuate all currency inputs with commas and dollar signs. This means that I have to use a text input instead of a number input, which means that I cannot take advantage of the inbuilt validation that number inputs have, chiefly min, max, step, and simply validating that what the user enters is in fact a numeric string. My idea is therefore to create a text input copy of the actual numeric input, hide the actual one, format the contents of the text input as the user types, and copy them over into the hidden numeric input so that they can be validated and submitted from there. What is the best way with javascript to display any validation errors that might pop up from the hidden number input? I am specifically looking at the constraint validation api:
https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation
Here's the example html:
<!-- hidden actual input field -->
<input id="real" name="cost" type="number" min="0" max="1000" step=".01" style="display:none;" />
<!-- visible, fake, punctuated input field -->
<input id="punctuated" type="text" />
So I am wanting to find a way to take any validation objects in the DOM for the first input and copy them over to the 2nd. I have tried this so far (see below), but it appears that the validity and validationMessage DOM properties are readonly:
var punctuated = document.getElementById('punctuated');
var real = document.getElementById('real');
punctuated.validationMessage = real.validationMessage;
punctuated.validity = real.validity;

First option: To add the same class to both inputs and use document.getElementsByClassName('some-class')
Second option: To use a single input and on (keyup) call the validation function which will check if the user input matches the regex you need

This appears to be the answer:
punctuated.setCustomValidity(real.validationMessage);
I just bound that to the page load, and a click and keyup event for the punctuated input, and it seems to work. So when the user types stuff into the punctuated input, it gets copied over to the real input and validated using the html attributes, and then the click and keyup events pass the validation message to the punctuated input.

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.

Variable length for input field

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

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.