Removing required property once other textbox is filled

Question

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

it's still the same :/ but may i know what are the differences? — Marini MK, Nov 11 '20 at 04:34

score 0 · Accepted Answer · answered Nov 11 '20 at 04:46

0

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");
});

answered Nov 11 '20 at 04:46

Dyeizon Procopiuk

81
6

it works! but only if i change from to . is there any significant differences between them? – Marini MK Nov 11 '20 at 05:07
[this](https://stackoverflow.com/questions/10401677/asptextbox-vs-input-type-text-vs-html-textbox) topic can help you. – Dyeizon Procopiuk Nov 11 '20 at 05:37

Jon P · Answer 2 · 2020-11-11T05:25:24.940

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>

Removing required property once other textbox is filled

2 Answers2