For the third example, we’ve built something you’ve probably seen in survey apps. However, there is a bug with this feature such that when the value is blank, it turns back into a string. To make it a bit easier for the user, we also added a current total right below so they can see, in real time, what their total is. We set up the total value as a computed value, and outside of that bug I ran into, it was simple enough to setup.
The user is asked to spend a “budget” for a set of features for a new Star Destroyer model. My check Form method now just needs to see if the total is 100 and that’s it.
You can play with this here: See the Pen form validation 3 by Raymond Camden (@cfjedimaster) on Code Pen.
First go to your html file and paste the following code : Here, I have a simple form.
The final thing to note is that each of the three fields has a corresponding logic (which is run on submit remember) checks for name and age only as movie is optional. Don’t forget that on a successful submission it’s going to POST to a temporary URL.
If they are empty we check each and set a specific error for each. See the Pen form validation 1 by Raymond Camden (@cfjedimaster) on Code Pen.
Now let’s jump into the fun part which is discussing the regular expression First we have the starting and ending slashes “/” , the expression then starts with a “^” sign to match with the beginning of the string.
Notice the [-\s\.] this part matches a hyphen(-) space or a dot (.).[0-9] means 3 digits.
While it isn’t terribly important, here is the logic: being empty, and then we hit the API. If it’s good, right now we do nothing (just an alert), but you could navigate the user to a new page with the product name in the URL, or do other actions as well.