Menu form: Customer name required

  1. Menu form
  2. Order required

Probably the most common use of JavaScript for forms is to require one or more fields to be filled out. This form is meant for taking an order. There are two things that are required: something to eat or drink, and the customer’s name. Let’s do the name first, because it’s the easiest.

Create a “menu.js” script file, and include it using:

script type="text/javascript" src="menu.js"></script>

Create a function called “verifyOrder” in that file.

function verifyOrder(form) {

var customerField = form["customer"];

if (!customerField.value) { = "red";

window.alert("We need your name in order to deliver your order.");

return false;

} else { = "inherit";

return true;



Add “onsubmit="return verifyOrder(this);"” to the <form> tag in the HTML page.

When you submit the form without filling out your name, it will display an alert box explaining that the name is required, and it will color the name input box red. If you type something into the name field and then submit, then the browser will submit the form to the form’s “action” (in this case, showing “Not Implemented”).

Form inputs and values

You can get a form’s input elements using the same method you would to get an element from an array. If there’s an input called “customer”, then form["customer"] is that element. We can even change the style on that element just as we would for any other element.

Input elements have a “value” property. This property contains the value of that element. If the customer has typed something into the element, the value property will be what they typed.

Customer name required: onsubmit

One of the attributes that <form> tags can have is onsubmit. The onsubmit attribute must contain JavaScript, and that JavaScript is performed when the form is submitted. If that JavaScript returns true, the form is submitted. If that JavaScript returns false, the form is not submitted. The verifyOrder function returns false if the customer field is empty, or true otherwise.

Remember, “this” in a tag is that tag. Since the “onsubmit” is in the <form> tag, “this” means that specific form. When it gets passed as the first parameter to “verifyOrder”, the first parameter in verifyOrder is called “form”.

  1. Menu form
  2. Order required