Требуется подтверждение и отправка формы ТОЛЬКО, когда display = block (показывается div) - PullRequest
Новая
       24

Требуется подтверждение и отправка формы ТОЛЬКО, когда display = block (показывается div)

0 голосов
/ 16 мая 2019

при нажатии переключателя «опция» отображает div, используя метод (display: none display: block). Ввод «Требования» является обязательным и есть в 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=showtext() {
        inp=required{

        }else
      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="tick" 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="tick" 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="tick" value="My manager recommended that I attend"> My manager recommended that I attend<br>
        <input type="checkbox" name="tick" value="I am interested in the content"> I am interested in the content<br>
        <p>
        <div id="tick_error" class="val_error"></div>

        <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" required>
</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>
...