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.For the second example, the second text field (age) was switched to email which will be validated with a bit of custom logic.The code is taken from the Stack Overflow question, How to validate email address in Java Script? This is an awesome question because it makes your most intense Facebook political/religious argument look like a slight disagreement over who makes the best beer. Here is the HTML, even though it’s really close to the first example. You can play with this example here: See the Pen form validation 2 by Raymond Camden (@cfjedimaster) on Code Pen. This tells Vue to cast the value to a number when you use it.These elements can then be referenced in the XML file that is returned by the Ajax call.
As the form is completed, the values are passed immediately to the server as POST variables, the server calculates a result, passing back an XML file which is then parsed to trigger various actions on the page as you will see.
For assistance in generating a valid XML response using PHP, read the article Generating an XML Response for Ajax Applications where you'll find a PHP class that complements the preceding Java Script functions.
A couple of people have already asked for a copy of the script referred to in these examples.
You have code that is (most likely) heavily tested and also updated on a regular basis.
This article follows on from Web Services using XMLHttp Request (Ajax) and demonstrates the usage of our Ajax Request class for validating online forms.
The form will ask you to name a new product and will then check to ensure that the name is unique.