Click here to Skip to main content
11,798,866 members (48,935 online)
Click here to Skip to main content

Removing HTML Required Attribute with JavaScript

, 10 Apr 2014 CPOL 6.6K 40 3
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 as a software developer for a multinational company and at the moment the focus lies on developing reports. Also, I am studying the equivalent to an Associate degree in System's Development and Analysis because after finishing my H.N.C. Business I was bitten by the programming bug. After that my passion for computer science has only increased.

You may also be interested in...

Comments and Discussions

GeneralMy vote of 3 Pin
Marco Bertschi9-Apr-14 23:05
protectorMarco Bertschi9-Apr-14 23:05 
GeneralRe: My vote of 3 Pin
Paulo Augusto Künzel10-Apr-14 0:57
professionalPaulo Augusto Künzel10-Apr-14 0:57 
GeneralRe: My vote of 3 Pin
Marco Bertschi10-Apr-14 1:00
protectorMarco Bertschi10-Apr-14 1:00 
GeneralRe: My vote of 3 Pin
Paulo Augusto Künzel10-Apr-14 3:51
professionalPaulo Augusto Künzel10-Apr-14 3:51 
GeneralRe: My vote of 3 Pin
Marco Bertschi10-Apr-14 4:45
protectorMarco Bertschi10-Apr-14 4:45 
GeneralMy vote of 1 Pin
techek9-Apr-14 21:16
membertechek9-Apr-14 21:16 
GeneralRe: My vote of 1 Pin
Paulo Augusto Künzel10-Apr-14 0:58
professionalPaulo Augusto Künzel10-Apr-14 0:58 
GeneralRe: My vote of 1 Pin
techek25-Sep-15 1:54
membertechek25-Sep-15 1:54 

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

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

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