Make sure products.html has a src in the script element pointing to pandora.js. Add an onsubmit event trigger (remember the return part) to the form element. The function you are about to create will check for completeness so use a suitable name. Test that the function is working by adding two lines temporarily: a simple alert and a return false. Then try submitting the form to check that the function is triggered. Comment out the alert and return.
Now you can add code to check each thing.
Filling and bread
These three are all required fields. Without them the sandwich cannot be made. If they are left blank that must be a mistake:
- get the value of each of these three form fields using getElementById and put each one into a variable
- use three alert lines to check that the value is being collected properly
- test it (if the fields are not set the alert messages should be blank, if selections have been made they should say which ones)
- comment out the alert lines
- under all of them create a single if statement which checks if any of the three is not changed from the default by using this condition: filling.length==1 || style.length==1 || bread.length==1 (the first entry in the drop downs always contains a single space so will be length 1 if the user has not made a change)
- pop up an alert if any of them are empty and return false
- add an else which returns true
When testing the form should submit properly only if all three are selected.
Spread, extras and comments
These do not need validation as the spread cannot be wrong and the other two are optional.
This is required and also needs to be a reasonable length. No address is likely to be less than 5 characters long. Therefore check for ones less than that more or less as you did for the filling etc..