Removing required property once other textbox is filled

Hiii.. i am very new here and i need help 🙁

I have two textboxes and either one of them needs to be filled in.
I put required at both of them but i need to remove it once i’ve filled in one of them

<asp:TextBox runat="server" TextMode="text" ID="id1" class="form-control-login" required=""></asp:TextBox>
<asp:TextBox runat="server" TextMode="text" ID="id2" class="form-control-login" required=""></asp:TextBox>

I tried using JS but nothing happened.

if (document.getElementById("id1") != "")
            document.getElementById("id1").onkeypress = document.getElementById("id2").removeAttribute("required");

I dont know what else i could do. Please help me T_T

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Try to use the following JavaScript code:

var input1 = document.getElementById("id1");
var input2 = document.getElementById("id2");

input1.addEventListener('keypress', function() {
    input1.removeAttribute("required");
    input2.removeAttribute("required");
});

input2.addEventListener('keypress', function() {
    input1.removeAttribute("required");
    input2.removeAttribute("required");
});

Method 2

It looks like you could be using asp.net Webforms which can suffer from id/name mangling, particularly if master pages come into play.

Let’s use data attributes to help us identify groups. E.g:

<asp:TextBox runat="server" data-requiredgroup="group1" TextMode="text" ID="id1" class="form-control-login" required=""></asp:TextBox>
<asp:TextBox runat="server" data-requiredgroup="group1" TextMode="text" ID="id2" class="form-control-login" required=""></asp:TextBox>

For demonstration purposes I’m going to use plain HTML to wire up the javascript, but it should still work with your webforms fine

//Get using our data attribute, don't need to worry about name mangling
var groups = document.querySelectorAll("[data-requiredgroup]");
for (var i = 0; i < groups.length; i++) {
  //Add Event Listener
  groups[i].addEventListener("keyup", function() {
    //Get group 
    let group = document.querySelectorAll("[data-requiredgroup=" + this.dataset.requiredgroup + "]");
    for (var g = 0; g < group.length; g++) {
      //Remove if not empty
      if (group[g] != this) { 
        group[g].required = (this.value == "");
      }
    }
  });
}

input:required {
  border-color:red;
}

<div>
  Group 1
  <input type="text" data-requiredgroup="group1" required />
  <input type="text" data-requiredgroup="group1" required />
</div>
<div>
  Group 2
  <input type="text" data-requiredgroup="group2" required />
  <input type="text" data-requiredgroup="group2" required />
  <input type="text" data-requiredgroup="group2" required />
  <input type="text" data-requiredgroup="group2" required />
</div>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0