Javascript input field only being required if shown?

Question

I am new to js/jquery and I am hoping you might be able to help me out with a simple edit to my script. The basis of my script is that I have a set of radio buttons, if the user selects Yes - they're done. However, if they click No, a new input box will popup and ask for more information.

Unfortunately, I have been unable to find a way to make the popup input box be required for submission because it has issues when the user clicks Yes, still being required, but hidden.

Here is my code so far:

function ShowHide(){
    if(document.getElementById('spellingN').checked){
        document.getElementById("spellingT").style.display = "block";
    } else {
        document.getElementById("spellingT").style.display = "none";
}
}

<div class="col-md-4">
<div class="radio"><b><input id="spellingY" name="spelling" onchange="ShowHide()" required="" type="radio" value="yes" /> Yes</b></div>

<div class="radio"><b><label for="radios-1"><input id="spellingN" name="spelling" onchange="ShowHide()" required="" type="radio" value="no" /> No </label></b></div>
</div>
</div>

<div id="spellingT" style="display: none;">
<div class="form-group"><b><label class="col-md-4 control-label" for="Spelling-Correction"><b>Question 2a</b> Type the grammatically correct version of the term.</label> </b>

<div class="col-md-4"><b><input class="form-control input-md" id="Grammar-Correction" name="Grammar-Correction" placeholder="" required="" style="width: 100%;" type="text" /></b></div>
</div>

I hope you'll be able to make some sense of it and help me out. Thanks in advance!

score 1 · Answer 1 · answered May 13 '16 at 12:26

1

You could add this check in your function:

if(document.getElementById('spellingT').style.display == "block"){
    //your submission
}

answered May 13 '16 at 12:26

P. Kumar

207
1
7

score 0 · Answer 2 · edited May 23 '17 at 10:29

0

// Element is hidden
if(document.getElementById('spellingT').offsetParent === null)
{

}
// Element is visible
else
{

}

For more details visit https://stackoverflow.com/a/21696585/2240375

edited May 23 '17 at 10:29

Community

1
1

answered May 13 '16 at 12:46

AsgarAli

2,201
1
20
32

Sorry, I'm a bit confused on how to use that. I'm very inexperienced in JS. Any chance you could elaborate? Thank you. – Rob May 13 '16 at 13:03

Javascript input field only being required if shown?

2 Answers2