How do i make the field that shows required in html5 and java script? Below is my code

Question

if you look at the code below I use javascript to show fields when another radio button is clicked. Is there way using html5 and javascript to make those fields that show required.

function yesnoCheckcanwork() {
    if (document.getElementById('no_to_work').checked) {
        document.getElementById('notoworkexplain').style.display = 'block';
    }
    else
        document.getElementById('notoworkexplain').style.display = 'none';
}

function yesnoCheckcanfelony() {
    if (document.getElementById('yes_to_felony').checked) {
        document.getElementById('yestofelonyexplain').style.display = 'block';
    }
    else
        document.getElementById('yestofelonyexplain').style.display = 'none';
}

<label>Are you a U.S. citizen or otherwise authorized to work in the U.S. on an unrestricted basis?:</label>
<input type="radio" id="yes_to_work" value="yes_to_work" name="can_work"  onclick="javascript:yesnoCheckcanwork();" required="required"><label for="yes_to_work" class="light">Yes</label>
<input type="radio" id="no_to_work" value="no_to_work" name="can_work"    onclick="javascript:yesnoCheckcanwork();" required="required"><label for="no_to_work" class="light">No</label>

<div id="notoworkexplain" style="display:none">
    <label for="no_to_work_explain">Please explain:</label><textarea id="no_to_work_explain" name="no_to_work_explain"></textarea>
</div>

<label>Have you ever been convicted of a felony?:</label>
<input type="radio" id="yes_to_felony" value="yes_to_felony" name="felony" onclick="javascript:yesnoCheckcanfelony();" required="required"><label for="yes_to_felony" class="light">Yes</label>
<input type="radio" id="no_to_felony" value="no_to_felony"   name="felony" onclick="javascript:yesnoCheckcanfelony();" required="required""<label for="no_to_felony" class="light">No</label>

<div id="yestofelonyexplain" style="display:none">
    <label for="yes_to_felony_explain">Please provide date of conviction and fully describe the circumstances:</label><textarea id="yes_to_felony_explain" name="yes_to_felony_explain" ></textarea>
</div>

could you please elaborate on "make those fields that show required"...? — benomatis, Sep 29 '14 at 18:36
you can put the required word like this:`` but that might not be the answer because it is not supported by safari. [link](http://www.w3schools.com/tags/att_textarea_required.asp) — starvator, Sep 29 '14 at 18:36
@webeno when a radio button is clicked...another field is shown. I want it shown and required only and if the radio button is clicked. — yawyaw, Sep 29 '14 at 18:45
@starvator that wont work because if I make it a required hidden, the browser will not allow me to submit. so I have to make it required if and only when I am about to show it — yawyaw, Sep 29 '14 at 18:52
then you can always use client or server side validation when the button is clicked? — starvator, Sep 29 '14 at 18:54

score 0 · Accepted Answer · answered Sep 29 '14 at 18:57

0

All you need to do is to set the element's required attribute to true or false.

So try this:

function yesnoCheckcanwork() {
    if (document.getElementById('no_to_work').checked) {
        document.getElementById('notoworkexplain').style.display = 'block';
        document.getElementById('no_to_work_explain').required = true;
    } else {
        document.getElementById('notoworkexplain').style.display = 'none';
        document.getElementById('no_to_work_explain').required = false;
    }
}

function yesnoCheckcanfelony() {
    if (document.getElementById('yes_to_felony').checked) {
        document.getElementById('yestofelonyexplain').style.display = 'block';
        document.getElementById('yes_to_felony_explain').required = true;
    } else {
        document.getElementById('yestofelonyexplain').style.display = 'none';
        document.getElementById('yes_to_felony_explain').required = false;
    }
}

Here is a demo: http://jsfiddle.net/dbhz2nj9/

answered Sep 29 '14 at 18:57

benomatis

5,536
7
36
59

Thank you...can I also do document.getElementById('no_to_work_explain').required = required; ? – yawyaw Sep 29 '14 at 19:07
this is definitely correct, but why do you need `required = required`? – benomatis Sep 29 '14 at 19:09
I was asking oppose to document.getElementById('no_to_work_explain').required = true; – yawyaw Sep 30 '14 at 13:07
i understood your question, but why are you not happy with `required = true`...? :) to answer your question, this is the correct method, so use this... – benomatis Oct 01 '14 at 04:20

How do i make the field that shows required in html5 and java script? Below is my code

1 Answers1