Validation issues

I have an html input type=“number” where my goal is to allow 2 digits before the period and two digits after the period. So it would essentially allow 00.00 - 99.99 but I’m struggling to get any suggestion on stack overflow to work correctly. I was wondering if someone had a code snippet that might help. Second question is there a javascript package on github that makes validation easier?

What do you have so far? What have you tried?
Have you learned regular expressions yet? If not, you might want to jump to that section in freeCodeCamp.
You don’t actually need an external library, html input elements allow you to specify patterns.

So I’ve tried this:


const distributorInput = document.querySelector('.distribute-validation');

distributorInput.addEventListener('change', function(e) {
   setTwoNumberDecimal(e);
});

function setTwoNumberDecimal(event) {
    this.value = parseFloat(this.value).toFixed(2);
 }

I think what I want is for the input to be formatted to look like 00.00 when they enter the page then can only modify those 4 digits for example when they click into the input and start typing 1 it would then look like 10.00 then they type 2 it would look like 12.00 then they type 3 it would look like 12.30 etc so that they don’t even have the choice to enter more than 2 chars before or after the decimal. Any thoughts on how I can accomplish this?

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).


Is your goal to only allow input that follows your pattern, or to change the input to that pattern? Right now you are converting the number to a formatted string. If you want to limit what they can input, you’ll want to use a validation pattern.

Ahh thank you I wasn’t sure how to format code! I am not entirely sure I understand your question, but when the user enters the page the input will always be 00.00 and then they should be restricted to only be able to edit those 4 characters (2 before period 2 after)

Have you learned how to use regular expressions yet? Have you looked at the pattern attribute of input elements?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text

I have, do you think I should use regex and the pattern attribute? I tried also using max=“4” to keep it within the range I wanted, but the regex pattern I tried didn’t work.

\d{2}.\d{2}

is the one that I tried.

. is a special character that needs to be escaped.

Here is an example: https://jsbin.com/munopaxusu/edit?html,output

@ArielLeslie Here is something I tried while trying to write code for replacing chars if the user types more than the 2 after a decimal, but it’s not quite right. I think though that it kind of highlights what I’m trying to accomplish.

const distributorInput = document.querySelector('.distribute-validation');

distributorInput.addEventListener('input', function(e) {
                                    let fieldLength = this.value.length;

                                    if (fieldLength <= 5) {
                                        if (fieldLength == 2) {
                                            this.value = parseFloat(this.value).toFixed(2);
                                        }
                                        return true;
                                    } else {
                                        let string = this.value;
                                        string = string.substring(0, string.length - 1);
                                        this.value = string;
                                    }
                                });

Do you think this is going in the right direction or should I keep trying to regex the input?

@ArielLeslie I’ve found the functionality I am looking for, here is the solution that worked for me. Inline on the input I’ve added this

onkeyup="(function(el){if(el.value.length>0){el.value=(parseFloat(el.value.replace('.','')/100)).toFixed(2);}})(this)"

and here is the addEventListener

                                const distributorInput = document.querySelector('.distribute-validation');

                                distributorInput.addEventListener('input', function(e) {
                                    let fieldLength = this.value.length;

                                    if (fieldLength <= 5) {
                                        return true;
                                    } else {
                                        let string = this.value;
                                        string = string.substring(0, string.length - 1);
                                        this.value = string;
                                    }
                                });

Congrats on figuring it out! Happy coding.

phew thank you! that was a weird one, and I’m sure that there has to be a better solution, but I can’t thank you enough for the help <3 freecodecamp community

computer-heart gif