Making Form Fields Mandatory

Using JavaScript to Make Form Fields Mandatory

One of the problems we Webmasters face when constructing forms is getting our users to fill in all the required fields. We can augment the form with all kinds of notes that warn the user of the dire consequences that can result from leaving a field blank, but users have a way of ignoring these things.

A better approach is to use a little JavaScript know-how to make one or more form fields mandatory. That is, make it so the browser won't submit the form unless the user puts something in those fields.

For example, there isn't any way for my MailForm script to be able to reliably detect the user's e-mail address, which means you have to rely on your readers to enter their e-mail address so that you can contact them. One thing you could do is use JavaScript to make your form's e-mail field mandatory.

Here are the steps to follow to set this up:

Step 1: Update the <FORM> Tag
You have to make two adjustments to your <FORM> tag:

Add the NAME attribute and set it to whatever you want to name your form.
Add the JavaScript onSubmit event and set it equal to "return validate(FormName)", where FormName is the name you gave your form.

Here's an example:

<FORM 
    ACTION="javascript:alert('Thank you for entering an e-mail address!')" 
    METHOD="POST"
    NAME="MyForm" 
    onSubmit="return validate(MyForm)">

Note that my ACTION attribute just displays a JavaScript alert box. In your form, you'll use a legitimate script URL.

Step 2: Set Up the Rest of Your Form
You set up the rest of your form in the usual manner. You just need to pay attention to the names you supply each field because you use those names in the JavaScript procedure. Here's the example field I'll use:

<B>Please enter your e-mail address:</B><BR>
<INPUT TYPE=TEXT SIZE=35 NAME="Email">

Step 3: Add the JavaScript
The onSubmit event means that when the user submits the form, the procedure specified by the onSubmit is executed before the form is sent to the server. This enables you to check that a particular field has been filled in (or whatever). If it hasn't, the JavaScript can tell the browser not to submit the form.

Here's a JavaScript that does this:

<SCRIPT LANGUAGE="JavaScript">
<!--
function validate(frm) {
    //
    // Check the Email field to see if any characters were entered
    //
    if (frm.Email.value.length == 0)
    {
        alert("Tsk tsk. Please enter an e-mail address.")
        frm.Email.focus()
        return false
    }
}
//-->
</SCRIPT>

What's happening here is that the validate procedure checks the length of whatever value the user entered into the specified field (Email, in this case). If the value is 0, it means the user didn't enter a value. So the script displays an alert, sets the "focus" back to the Email field, and then returns false, which tells the browser not to submit the form.

Notice two things here:

The if statement checks the length of the form field named Email. When setting this up for your own use, you'll need to change Email to the name of your field.
The same goes for the frm.Email.focus() statement. That is, you need to change the Email part to the name of your field.

Here's a sample form so you can try this out for yourself:

This works fine, but the user may just enter a token character to fool the script. To take things up a notch, you can have the script check the entered value to see if it contains an "@" symbol. Here's a JavaScript that does this:

<SCRIPT LANGUAGE="JavaScript">
<!--
function validate2(frm) 
{
    //
    // Check the Email field to see if any characters were entered
    //
    if (frm.Email.value.length == 0)
    {
        alert("Tsk tsk. Please enter an e-mail address.");
        frm.Email.focus();
        return false;
    }
    //
    // Now check the Email field for the "@" symbol
    //
    if (frm.Email.value.indexOf("@") == -1)
    {
        alert("Caught you! Please enter a valid e-mail address.");
        frm.Email.focus();
        return false;
    }
}
//-->
</SCRIPT>

Try it out: