How to Check if an Input Field is Required Using jQuery?

To check if an input field is required using jQuery, we can check if the required attribute of each input field is set.

For instance, if we have:

<form id="register">
  <label>Nickname:</label>
  <input type="text" name="name" required="" />
  <br>

  <label>Email:</label>
  <input type="email" name="email" required="" />
  <br>

  <label>Password:</label>
  <input type="password" name="password" required="" />
  <br>

  <label>Again:</label>
  <input type="password" name="password-test" required="" />
  <br>

  <input type="submit" value="Register" />
</form>

Then we write:

$('form#register').find('input').each(function() {
  if (!$(this).prop('required')) {
    console.log("not required");
  } else {
    console.log("required");
  }
});

We have a form that has a few input elements.

Then we get all the input elements in the form with $('form#register').find('input').

Next, we call each with a callback that gets the value of the required attribute with:

$(this).prop('required')

And we negate that to check if a field isn’t required.

If the required attribute isn’t present, then we log 'not required'.

Otherwise, we log 'required'.