How to Make Form Input Fields Required

If you are designing a web form for your website or application with a number of text input fields, text boxes, selections, check boxes and other form elements, and if some of these information is a must-have for you, it is crucial to make the fields that the user must fill, as required fields.

What is meant by "required" is that unless the user fills those input fields, the form will not be submitted when the user clicks the submit button. Instead, an indication or a notice text will be displayed to the user to make sure to fill all the required fields. Without making fields required, you won't be able to collect the needed info from the user.

Having required fields on some types of forms may not be necessary, but for the majority of the scenarios, it is usually a must. When no fields are configured to be required on a form, depending on what additional information the form script is getting, the user may as well send an empty form if s/he doesn't enter anything into the form fields, which is what we wouldn't want to happen in most cases.

For example, it wouldn't be nice for a contact form to be submitted with the "Name" field being empty. Or, having an email submission form or a sign up form with an email address field that is not required will serve no purpose.

Now, let's see how a form field can be made required, preventing the form from being submitted if that field is empty.

How to Make Form Fields Required

There are multiple ways for making form fields required and I will go over three of them in the examples below. Whichever you use or whether you use them in combination or not is totally up to your preference and the functionality of your form.

1. HTML Required Input Field Example

In the first method, we will use pure HTML without the help of any scripts. HTML5 introduced a new and highly useful attribute named as required, which can be used with form elements such as <input>, <textarea> and <select>. To make a form input field required, you simply add the required attribute like the following:

<input type="text" name="name" required>

A live example of the above text input field with a submit button will function like this:

If you click the submit button without entering any text into the text field, it will display a notice asking you to fill the input field. The notice you will see will vary based on your web browser. When you start typing in the text field, the notice will disappear and then you will be able to submit the form. Note that, since this is a demo form, submission will not happen.

The required attribute works with these <input> element types: text, password, checkbox, radio, number, email, url, tel, search, date, file.

Similarly, you can make a textarea or a select field as required using the code below:

<textarea name="message" required></textarea>

<select name="color" required>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

You can visit this link on caniuse.com to check the browser support for the required attribute.

2. JavaScript Required Input Field Example

The required attribute is a great feature to use for sure, but it was introduced with HTML5 and it may not be well supported by all browsers you are planning to optimize your website for. This brings us to JavaScript as our second option.

The concept for making an input field required via JavaScript is as follows:

1. Listen to the form submission event (onsubmit).
2. At the time of submission, check if the input field value is empty or not.
3. If it is not empty, proceed with submitting the form.
4. If it is empty, prevent form submission and display a notice.

Though the basic steps are as explained above, how you implement it is totally up to you and you may find dozens of different approaches on the web, especially considering many JS libraries and frameworks in use today. I will provide the following example, just to give you a basic idea about the method.

HTML code for the form:

<form action="" method="post" id="contact">
  <input type="text" name="name" id="name">
  <textarea name="message" id="message"></textarea>
  <div id="notice"></div>
  <input type="submit" value="Submit">
</form>

JS code for the validation:

document.getElementById("contact").onsubmit = function() {
  if (document.getElementById("name").value == "" || document.getElementById("message").value == "") {
    document.getElementById("notice").innerHTML = "Please enter your name and message.";
    return false;
  }
};

Note the use of id attributes for the form elements in the JS code.

This is the structure of the method. Where and how you display the notice is up to you, you can also apply style to it via CSS.

jQuery Required Input Field Example

jQuery is a JS library, so it is not a different thing; just a different way of expressing the same thing. So, if we wanted to do the same validation above using jQuery, we will have used the following code:

$('#contact').submit(function(e) {
  if ($('#name').val() == "" || $('#message').val() == "") {
    $('#notice').html("Please enter your name and message.");
    e.preventDefault();
  }
});

Checking the form fields and making them required via JavaScript is a preferable option since it does the check on the client side (in the browser), hence it doesn't create unnecessary server load.

3. PHP Required Input Field Example

Our third option is to do the check on the server side. If your website is built with PHP, you can validate the form on the server once the form is submitted. We will slightly modify our HTML form code like the following:

<form action="" method="post">
  <input type="text" name="name">
  <textarea name="message"></textarea>
  <div id="notice"><?php if (isset($notice)) echo "Please enter your name and message." ?></div>
  <input type="submit" name="submit" value="Submit">
</form>

And our PHP script will be like:

<?php
if (isset($_POST["submit"])) {
  if (empty($_POST["name"]) || empty($_POST["message"])) {
    $notice = true;
  } else {
    // Continue with handling the submitted form info...
  }
}
?>

Note that, with PHP, the form is submitted and processed on the server, causing a server load and then the notice is displayed if any of the required fields are empty.

f t g+ in