How to create mandatory form fields?


Do you want to make sure a certain field in your form is filled out? You'll have to make it mandatory.

This requires some programming, but with the following guidelines, even without programming skills, you might be able to pull it off anyway!

 

Inside this document we will describe the essentials you need to make fields mandatory.

Here you have the essentials in a few steps :

1. Create your form.

2. Define the mandatory fields.

3. Get your form ready to check the mandatory fields.

4. Check your complete form.

 

Let's get started.

1. Create your form

First things first of course. You need to create your form:

Link to lists and forms topic

Back to top

2. Define the mandatory fields.

Our form example:

 

In our example, email and name are going to be made mandatory.

First, click   inside the editor. You need this source code to see how your fields are 'named'. 

In the standard form the names of the email field and the name field are :

<input maxlength="32" name="name" type="text" value="&lt;?name?&gt;">

<input maxlength="64" name="email" type="text" value="&lt;?email?&gt;">

 

YOU need to adapt it like described below

<input maxlength="32" name="name" id="name" type="text" value="&lt;?name?&gt;">

<input maxlength="64" name="email" id="email" type="text" value="&lt;?email?&gt;">

 These fields we are going to use in our checkFormFields() program. Which is described in the following topic.

 

Back to top

 

3. Get your form ready to check the mandatory fields.

 Copy the following code and paste in the source above your form (you can recognize where the form starts by the <form> tag).

<script type="text/javascript">
    function checkFormFields() {
    // msg will contain the errors found.
    var msg='';

    // Check the name field
    if (!document.getElementById('name').value){
        msg+="\n";

       msg+="- Name is mandatory field";

    }
    // Check the email field  

    if (!document.getElementById('email').value){
        msg+="\n";

       msg+="- Email is mandatory field";
    // This will popup with the found errors     
    }
    if (msg==''){
        document.getElementById('action_submit').click();
    }else{
        alert("Gelieve de volgende velden correct in te vullen:"+"\n"+msg);

        return false;

        }

}
</script>

In the code you just copied and pasted, you'll need to change the words 'name' and 'email' for the id's of your mandatory fields.

If you have more than 2 mandatory fields, you'll have to duplicate the code for those additional mandatory fields.

 

You will also need to adjust the submit button like stated below.
(try and find this code and adjust like stated below)

<input name="check" onclick="checkFormFields()" type="button" value="Submit">

<input id="action_submit" name="action_submit" style="display: none;" type="submit">

This code will check if everything mandatory is filled out and will then submit the data. If not filled out it will trigger a message to indicate some mandatory fields should be filled out.

 

Back to top

 

 4. Check your complete form.

 Now you can launch your form/landingpage and test it !

 

Back to top