仅当 display=none（显示 div）时验证输入检查

Question

当按下单选按钮“选项”时，它会使用 (display:none display:block) 方法显示一个 div。输入“要求”是必需的，并且在 html 中有。问题是，当按下提交时，即使没有显示 div，表单也需要输入，因为用户没有选择阻止 css 的单选按钮。仅当用户选择了单选按钮选项时才需要该字段。

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/[jquery version here]/jquery.min.js"
language="javascript" type="text/javascript"></script>
    <title>Test</title>

    <style type="text/css">
        body {
            padding: 80px;
        }
        #requirements {
        width: 100%;
        }
        #results {
        width: 100%;
        }


    </style>

<script type="text/javascript">



// DISPLAY HIDDEN TEXT
function hide() {
  document.getElementById('hidden').style.display ='none';
}
function show() {
  document.getElementById('hidden').style.display = 'block';
}

function hidetext() {
    document.getElementById('hiddentwo').style.display = 'none';
}

function showtext() {
    document.getElementById('hiddentwo').style.display = 'block';
}

function validateForm(e) {
    let inp=[...document.getElementsByName("tick")];
    if(!inp.some(i=>i.checked) && chk.checked) {
        e.preventDefault();
      alert('You must select why you are attending!');
    }

}





</script>

</head>
<body>
<h1>Registration Request</h1>

<form id="form" method="post" name="form" enctype="multipart/form-data" action="#">

        <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>
        <div id="optionOne_error" class="val_error"></div>

    <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="It will help me develop the skills and knowledge required for my current role" > It will help me develop the skills and knowledge required for my current role<br>
        <input type="checkbox" name="tickone" value="It will help me develop the skills and knowledge for a possible future role/body of work" > It will help me develop the skills and knowledge for a possible future role/body of work <br>
        <input type="checkbox" name="ticktwo" value="t was identified as a need during my performance management discussions"> It was identified as a need during my performance management discussions<br>
        <input type="checkbox" name="tickthree" value="My manager recommended that I attend"> My manager recommended that I attend<br>
        <input type="checkbox" name="tickfour" value="I am interested in the content"> 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>


<p>Do you require adjustments or additions to the session delivery to support your participation? For example, hearing loop or wheelchair access.</p>
        <input type="radio" name="option" value="yes" onclick="showtext()" required> Yes<br>
        <input type="radio" name="option" value="no" onclick="hidetext()"> No<br>

        <div id="option_error" class="val_error"></div>

<div id="hiddentwo" style="display: none;">
    <p>Please provide details of your requirments.</p>
<input type="text" id="requirements" name="requirements" ></input>
</div>



<p>Please upload any supporting documentation to support your registration request </p>
<div class="browse-button">
  <input type="file" name="attachments[]" multiple="multiple"></input>
</div>

<div class="submit-button">
  <button type="submit" name="submit" onclick="validateForm(event)" value="submit">Submit</button>
</div>

</form>

<img src="Logo.png" alt="Persuit Technology Logo" width="110" style="margin-top: 20px">

</body>
</html>

Answer 1

我建议不要在隐藏div 时也禁用input 标记。

所以hide 函数将是：

function hide() {
   var inputs = document.getElementById('hidden').getElementsByTagName('input');

   for(i = 0; i < inputs.length ; i++)
       inputs[i].disabled = true

   document.getElementById('hidden').style.display ='none';

}

show 函数将是：

function show() {
   var inputs = document.getElementById('hidden').getElementsByTagName('input');

   for(i = 0; i < inputs.length ; i++)
       inputs[i].disabled = false

   document.getElementById('hidden').style.display ='block';

}

您也可以将这些函数用于showText 和hideText。