Search code examples
javascripthtmlhtml-input

How to ensure HTML input remains required?


If you create a form using HTML inputs and make the input required using the "required" attribute (<input type="text" required>), what is stopping a user from manually deleting the attribute by using their web browser's built in developer tools or by loading JavaScript by some other means (such as a bookmarklet)?

In other words, how can you ensure the required input remains required?


Solution

  • You need to consider a few things:

    1. Everything on the client side can be modified by the client: nothing is stopping me from using my browser console or modifying the source code to change parts of your page, and you can't do anything to stop that. For instance, look how many upvotes your question has:

      enter image description here Obviously that doesn't actually do anything, but that's because all of the heavy lifting is done by Stack Exchange's servers.

    2. Even if you make a field required, people can still fill in the field with a space or asdf and move on. Just because input is required doesn't mean that it is valid.

    So, with that in mind, realize that you'll need to work on the server side to validate input. People can't mess with servers (easily) and it's the safest way to validate input. You'll need to deal with validation when your server receives the data because the client side is always vulnerable to user modification.