How to disable the required field in radio button when control is hidden?

Question

How can I disable the show/hide button content when it's disabled? Because even if it is hidden, it is required to fill those fields.

Here is My code:

<script type="text/javascript">
    function ShowHideDiv() {
        var chkYes = document.getElementById("chkYes");
        var dvPassport = document.getElementById("dvPassport");
        dvPassport.style.display = chkYes.checked ? "block" : "none";
    }
</script>

<span></span>
<label for="chkNo">
    <input type="radio" id="chkNo" name="bill" value="Billable" onclick="ShowHideDiv()" />
   Billable
</label>
<label for="chkYes">
    <input type="radio" id="chkYes" name="bill" value="Non-Billable" onclick="ShowHideDiv()" />
    Non-Billable
</label>
<hr />
<div id="dvPassport" style="display: none">
    Firm Expense Code:
 <select name="FEC" id="txtPassportNumber" > 
  <option selected> 
    --------
  </option> 
  <option> 
    Firm expence-non-billable client Travel 8970100
  </option> 
  <option> 
    Firm expense Travel-Marketing 8970205 Personal Travel
  </option> 
 
 </select>

score 1 · Answer 1 · edited May 23 '17 at 12:33

1

You can add required attribute when it will be shown or when you need to.

document.getElementById("edName").required = true;

So start without required and when person show/hide something add it.

Answer from this question.

How to set HTML5 required attribute in Javascript?

Hope this helps.

edited May 23 '17 at 12:33

Community

1
1

answered Aug 27 '16 at 13:42

Mykola Borysyuk

3,373
1
18
24

Thanks ill try it :) – Dannyweb Aug 27 '16 at 13:47
1

Cool.Glad to help. – Mykola Borysyuk Aug 27 '16 at 13:52
Wait sir there is something happen, my radio button show/hide not working i forgot to check?? – Dannyweb Aug 27 '16 at 13:58
attribute required shouldn't affect radio buttons logic. Can you change your snipper with newst code. And we can see what's wrong there. Or give me jsbin or jsfiddle with your code so i can take a look – Mykola Borysyuk Aug 27 '16 at 13:59
jsfiddle.net/m6u3js36 here sir – Dannyweb Aug 27 '16 at 14:08
Here you go. You have wrong assighment. Now all works. https://jsfiddle.net/m6u3js36/2/ – Mykola Borysyuk Aug 27 '16 at 14:10
No problem. Ask any time. – Mykola Borysyuk Aug 27 '16 at 14:14
one last, how about on this multi radio button https://jsfiddle.net/m6u3js36/5/ here is the link Thanks :) – Dannyweb Aug 27 '16 at 14:17
where i put the code to disable hidden content on textbox? thanks – Dannyweb Aug 27 '16 at 14:44
inside showDiv method...just like you hide them...for each that hidden set attr required to false..for one that you show set to true – Mykola Borysyuk Aug 27 '16 at 14:45
function showDiv (divId) { var div = document.getElementById(divId); divId.required = true; var divs = document.getElementsByTagName('div'); for (var i in divs) { divs [i].className = "hidden"; } div.className = "shown"; } – Dannyweb Aug 27 '16 at 14:46
Nope.. change divId.required = true; to be div.required = true; You need to set property to dom element. Also dont forget to remove all required attributes from other divs like this. in for loop. divs [i].className = "hidden"; divs [i]. required = false; – Mykola Borysyuk Aug 27 '16 at 14:49
sir can you help me it went me wrong, lastly, code to jsfiddle please... youre so good. – Dannyweb Aug 27 '16 at 14:51
We need to talk outside of here. Because i dont quite understand what you trying to achieve. If you have skype. You can add me. My nickname mukolajko20 from ternoipl. – Mykola Borysyuk Aug 27 '16 at 14:56

andre mcgruder · Answer 2 · 2016-08-27T15:03:00.760

0

You could check the radio buttons display style and if it is none set the required attribute to false else set it to true.

document.getElementById("edName").style.display === 'none' ? document.getElementById("edName").required = none : document.getElementById("edName").required = true;

update

This should work for all the radio buttons

var radioBtns = document.querySelectorAll('[input type="radio"]');

radioBtns.forEach( function (item){
    item.getElementById("edName").style.display === 'none' ? item.getElementById("edName").required = none : item.getElementById("edName").required = true;
});

edited Aug 27 '16 at 15:03

answered Aug 27 '16 at 14:15

andre mcgruder

1,120
1
9
12

https://jsfiddle.net/m6u3js36/5/ how about on this multi radio button sir?? – Dannyweb Aug 27 '16 at 14:27

How to disable the required field in radio button when control is hidden?

2 Answers2

update