How to remove required property from input field on form submit with JavaScript?

Sometimes, we want to remove required property from input field on form submit with JavaScript.

In this article, we’ll look at how to remove required property from input field on form submit with JavaScript.

How to remove required property from input field on form submit with JavaScript?

To remove required property from input field on form submit with JavaScript, we can set the input’s required property to false in the form submit handler.

For instance, we can write:

<form>
  <input required>
  <button type='submit'>
    Submit
  </button>
</form>

to add a form with an input and a submit button.

Then we write:

const input = document.querySelector("input")
const form = document.querySelector("form")

form.onsubmit = (e) => {
  e.preventDefault()
  input.required = false
}

to select the input and the form.

Then we set the form.onsubmit function to a function that sets input.required to false to remove the required attribute from the input on submit.

Conclusion

To remove required property from input field on form submit with JavaScript, we can set the input’s required property to false in the form submit handler.