How to Check if the Input Field Is Empty Using jQuery

This guide shows how to check whether a text input has a value with jQuery. The examples use val() to read the field; they do not submit the form or replace server-side validation.

Read an input value with jQuery’s val() method

jQuery does not provide a separate method dedicated to this check. Call val() with no argument to get the selected text input’s current string value; an untouched field returns "". With an argument, val() sets a value instead, which is separate from the getter used here.

For a JavaScript string, truthiness distinguishes "" from strings containing characters.

Run this example:

const name = "Ada";
if (name) {
  console.log(`Hello, ${name}!`);
}

Hello, Ada!

In the jQuery example below, !$('#NameField').val() is true when the text input’s value is an empty string. The ! operator converts a falsy value to true; for this text input, the relevant falsy value is the empty string returned by val(). The browser-page source uses jQuery from its CDN and is a static example; it is not runtime output.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Check a text input with jQuery</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(function () {
      $('#SubmitBtn').on('click', function () {
        if (!$('#NameField').val()) {
          alert('Please enter your name.');
        }
      });
    });
  </script>
</head>
<body>
  <label for="NameField">Please enter your name:</label>
  <input type="text" id="NameField" name="NameField">
  <button id="SubmitBtn" type="button">Submit</button>
</body>
</html>

The alert appears when the button is clicked while the field is empty. It does not appear for a value containing characters. This example checks only the field’s current text; it does not define what the application should do after the check succeeds.

Check whether an input value is empty with val().length

If you want the condition to state the rule explicitly, read the string length and compare it with zero: $('#NameField').val().length === 0. For a text input, this condition is true when the value contains no characters. It is false when the value contains one or more characters. The strict equality operator (===) compares the length with the number 0 without type conversion.

Use that expression in place of the condition in the preceding click handler to keep the same form and alert behavior. Because val() returns a string for this text input, reading its length is appropriate. The length check makes the intended condition easy to see, while the negated-value form is shorter; both express the same rule for this field.

Choose the check that matches your input rules

A string made only of spaces is still nonempty: spaces are characters, so both checks consider a value such as " " to have a positive length. If your rule should reject whitespace-only input, trim the value before checking it, for example with $('#NameField').val().trim().length === 0. Trimming changes the rule by ignoring leading and trailing whitespace, so use it only when that is what the interface requires. It also does not remove whitespace inside a name or phrase.

For a simple text field, choose the truthiness check for concise code or the length comparison when the explicit zero-character rule is clearer to you or your team. Keep the selector pointed at the intended input, and decide separately how a failed check should be communicated. These client-side checks help with immediate feedback, but data still needs appropriate validation wherever it is processed by the application.