Click here to Skip to main content
13,247,336 members (78,084 online)
Click here to Skip to main content
Add your own
alternative version


3 bookmarked
Posted 9 Apr 2014

Removing HTML Required Attribute with JavaScript

, 10 Apr 2014
Rate this:
Please Sign up or sign in to vote.
How to remove the HTML required attribute with just JavaScript


This Tip/Trick is a quick reference on how to remove the required from an input tag using simply JavaScript to achieve it.


>Sometimes we have a very simple screen and we wouldn't want to import a library just for this one functionality. If you are using JQuery or anything else, by all means, use the functions provided. If not, I hope the following code becomes useful.

The Code

Lets get to it. If at a given web page you have a simple form that asks for the name and the phone as below:

<form method="post" style="border:1px solid black; padding:10px;">
    <label>Name:</label><input type="text" id="name"></input><br/>
    <label>Phone:</label><input type="text" id="requiredInput" required></input>

    <p>If you try to submit before disabling, the required message will pop up</p>
    <input type="submit"></input>

But I have a friend (or a boss) who ask (or demmands) he only has to put his name and not his phone.
That is an easy and simple way to do it. At the input button, you can add a onClick() event if the following condition:

//Lets say the name of the user is Jack
if( document.getElementById("name").value === "Jack"){
     //Next Code goes here

For this example, the simple comparison between the value in the name input box wiith the string "Jack" should be enough. (Let's assume he the only Jack there is :P)

For those used to JQuery, the way to go if you want to remove the required is


But, as said before we are trying to accomplish it without the need for such.
In that case you could:

if( document.getElementById("name").value === "Jack"){
     //set a variable pointing to the Id
     var theInput = document.getElementById("requiredInput");
     //work the input, validate it or perform any other
     //check it might be required. Specially if it is not just a string
     //but a date or number.
     //and the method to remove the attribute

Also, if the intention is to simply remove it, no checking required. you can do as follows:

if( document.getElementById("name").value === "Jack"){
     //short version. There is no need to create a variable and stuff.


I've added a file to be downloaded. Hopefully it will help to further clarify and to work as an example.

The required attribute can be a bit buggy sometimes. If you are using chrome, make sure you write, click away from or do anything that will make it go away before closing the tab. Otherwise it may be carried around to the other screens.

After the post, the required will return to the input. Most probably know that, so its just a heads up.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Paulo Augusto Kunzel
Software Developer
Brazil Brazil
I work from home as a business owner and Front-end developer of a company whose main revenue comes from a SaaS we created to help people manage their online sales on a website called Mercado Livre. On my spare time I’ve been building a website called where I provide information about JavaScript in Portuguese to help new developers.

You may also be interested in...


Comments and Discussions

GeneralMy vote of 3 Pin
Marco Bertschi10-Apr-14 0:05
protectorMarco Bertschi10-Apr-14 0:05 
GeneralRe: My vote of 3 Pin
Paulo Augusto Künzel10-Apr-14 1:57
professionalPaulo Augusto Künzel10-Apr-14 1:57 
GeneralRe: My vote of 3 Pin
Marco Bertschi10-Apr-14 2:00
protectorMarco Bertschi10-Apr-14 2:00 
GeneralRe: My vote of 3 Pin
Paulo Augusto Künzel10-Apr-14 4:51
professionalPaulo Augusto Künzel10-Apr-14 4:51 
GeneralRe: My vote of 3 Pin
Marco Bertschi10-Apr-14 5:45
protectorMarco Bertschi10-Apr-14 5:45 
GeneralMy vote of 1 Pin
techek9-Apr-14 22:16
membertechek9-Apr-14 22:16 
GeneralRe: My vote of 1 Pin
Paulo Augusto Künzel10-Apr-14 1:58
professionalPaulo Augusto Künzel10-Apr-14 1:58 
Hello Techek,
Please check the answer posted to Marco.
I've updated the Tip/Trick, please let me know your thoughts

There are no secrets to success. It is the result of preparation, hard work, and learning from failure. Colin Powell

modified 10-Apr-14 9:55am.

GeneralRe: My vote of 1 Pin
techek25-Sep-15 2:54
membertechek25-Sep-15 2:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171114.1 | Last Updated 10 Apr 2014
Article Copyright 2014 by Paulo Augusto Kunzel
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid