Click here to Skip to main content
Click here to Skip to main content
Go to top

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

Introduction

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

Description

>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>
        <br/>
        
        <p>If you try to submit before disabling, the required message will pop up</p>
        <input type="submit"></input>
    </form>

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

$("aTag").removeAttr("anAttribute");

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
     theInput.removeAttribute("required");
}

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.
     document.getElementById("requiredInput").removeAttribute("required");
            }

Notes

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.

License

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

Share

About the Author

Paulo Augusto Künzel
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.

Comments and Discussions

 
GeneralMy vote of 3 [modified] PinprotectorMarco Bertschi9-Apr-14 23:05 
GeneralRe: My vote of 3 PinprofessionalPaulo Augusto Künzel10-Apr-14 0:57 
GeneralRe: My vote of 3 PinprotectorMarco Bertschi10-Apr-14 1:00 
GeneralRe: My vote of 3 PinprofessionalPaulo Augusto Künzel10-Apr-14 3:51 
GeneralRe: My vote of 3 PinprotectorMarco Bertschi10-Apr-14 4:45 
GeneralMy vote of 1 Pinmembertechek9-Apr-14 21:16 
GeneralRe: My vote of 1 [modified] PinprofessionalPaulo Augusto Künzel10-Apr-14 0:58 
Hello Techek,
Please check the answer posted to Marco.
I've updated the Tip/Trick, please let me know your thoughts
 
Regards
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.

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 | Mobile
Web02 | 2.8.140916.1 | Last Updated 10 Apr 2014
Article Copyright 2014 by Paulo Augusto Künzel
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid