lundi 13 mai 2019

How to check if one or more checkbox in form is selected(only when div is displayed)

I need help to validate a form on submit. It should check that one of more checkboxes are selected or else display error message. I have currently got it working but the problem is the checkbox option is displayed after selecting a radio button on the form. The code I have now still shows an error message even if the div isn't displayed which is a big issue as users haven't seen the checkbox option.

Javascript:

function validateForm() {
    var checked=false;
    var elements = document.getElementsByName("tick");
    for(var i=0; i < elements.length; i++){
        if(elements[i].checked) {
            checked = true;
        }
    }
    if (!checked) {
        alert('You must select why you are attending!');
    }
    return checked;
}

HTML:

<form id="form" method="post" enctype="text/plain" action="xxx12345@gmail.com?subject=EmployeeTest Form" name="vform">

        <p>This course is identified in my Work Plan and Learning Agreement</p>
        <input type="radio" name="optionOne" value="yes" onclick="hide()" required> Yes<br>
        <input type="radio" id="chk" name="optionOne" value="no" onclick="show()"> No<br>

    <p>
        <div id="hidden" style="display: none">
        <p>I am attending this session because (tick all that apply) </p>
        <input type="checkbox" name="tick" value="selectone" > It will help me develop the skills and knowledge required for my current role<br>
        <input type="checkbox" name="tick" value="selecttwo" > It will help me develop the skills and knowledge for a possible future role/body of work <br>
        <input type="checkbox" name="tick" value="selectthree"> It was identified as a need during my performance management discussions<br>
        <input type="checkbox" name="tick" value="selectfour"> My manager recommended that I attend<br>
        <input type="checkbox" name="tick" value="selectfive"> I am interested in the content<br>
        <p>

        <p>What would you like to achieve as a result of your attendance? For example, "I would like to learn to write better emails to improve my communication skills." </p>
        <input type="text" id="results" name="results">
</div>

<div class="submit-button">
  <button type="submit" name="submit" value="send">Submit</button>
</div>

</form>

I want the checkbox error message to show ONLY if the user has selected the radio button "NO" and therefor is required to check a checkbox. If they select the radio button "YES" and this checkbox div is not displayed, then I don't want the error message on submit.

THANK YOU SO MUCH!




Aucun commentaire:

Enregistrer un commentaire