Javascript - 選択後に「必須」属性を変更する

Question

デフォルトでは（一部のフォーム入力で）非表示になっています。 チェックボックスをオンにすると、とその入力が表示されます。

デフォルトでは、入力テキストは「必須ではありません」（送信を完了するために）必要がありますが、チェックボックスを選択した場合、どのように入力テキストを「必須」に設定できますか？

<script language="javascript"> 
 
function toggleFields() { 
 
\t var scelta = document.getElementById('mostraDiv'); 
 
\t var div1 = document.getElementById('div1'); 
 
\t var div2 = document.getElementById('div2'); 
 

 
\t if (scelta.checked==true) { 
 
\t \t /* visualizzo e/o spengo i div che voglio */ 
 
\t \t div1.style.display = "block"; 
 
\t \t div2.style.display = "none"; \t 
 
\t } 
 
\t else { 
 
\t \t div1.style.display = "none"; 
 
\t \t /* visualizzo e/o spengo i div che voglio */ 
 
\t \t /* div2.style.display = "block"; */ 
 
\t }; 
 
\t 
 
} 
 
</script>

<div> 
 
show div1: <input type="checkbox" name="mostraDiv" id="mostraDiv" value="ok" onchange="toggleFields()" /> 
 
</div> 
 

 

 
<form data-toggle="validator" class="form-horizontal" role="form" id="gestionemenu" name="gestionemenu" action="elaboraForm.php" method="POST"> 
 
<div id="div1" style="display: none;"> 
 
    <h1>Mostro il DIV 1</h1> 
 
    <input type ="text" class="form-control" name="campo1" /> 
 
</div> 
 

 

 
<div id="div2" style="display: none;"> 
 
    <h1>Mostro il DIV 2</h1> 
 
    <input type ="text" name="campo2" value="div2.." /> 
 
</div> 
 

 
<div id="div n...."> 
 
\t <h1>ALWAYS VISIBILE</h1> 
 
\t <input type ="text" name="campo3" value="div sempre visibile" /> 
 
</div> 
 

 
<input type="submit" name="CONFIRM" /> 
 
</form>

Answer 1

あなたがelement.setAttribute('required','required');
を使用することができますし、要素は必須入力要素になるところelement.removeAttribute('required');にそれを取り除くためにrequried属性を追加します。

続きを読む：
https://developer.mozilla.org/en/docs/Web/API/Element/setAttribute https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute

Answer 2

あなたが入力を選択し、設定したときにその属性が、これはとdiv要素に入力を取得します。この

div1.getElementsByTagName('input')[0].setAttribute('required', 'required');

のように、必要なことを行うことができます

id div1とし、必須に設定します。

Answer 3

ページの重要な要素を隠す/表示するには、まずJavaScriptを使用しないでください。これにより、Javascriptを無効にする/古いブラウザを使用する人にページがアクセスしにくくなります。許容可能な解決策は、CSS3を使用してフォームセクションを非表示/表示し、従来のブラウザでのみ表示される単純なテキスト通知を追加することです。 「このセクションはボックスにチェックをした場合にのみ必要です」などのようなものです。 - 追加「必要」属性が追加されます

setRequiredFields(document.getElementById("div1"), true); 

をそして最後に、念のため。そして、必要に応じて呼び出す

function setRequiredFields(section, required) { 
    for (var el of section.querySelectorAll("input")) { 
    if (required) { 
     el.setAttribute("required", ""); 
    } else { 
     el.removeAttribute("required"); 
    } 
    } 
} 

：

あなたの質問に答えるために、あなたは、単にのようなものを使用することができますあなたのページには実質的にセキュリティはありません（要件を実行するブラウザの責任であるかどうか）。