テーブルのチェックボックスがクリックされずにフォームを送信しようとしたときに警告を受け取る方法

Question

チェックボックスの値を他のページに送信しようとしましたが、チェックボックスをクリックして選択した行を削除しようとしましたチェックボックスの警告が空で与えると、フォームはチェックボックスがクリックされた後に提出された場合には、続行するかどうかを警告与えるべきかどうか、これは私のフォーム

<form action="deleteselectedhr" name="deleteFiles" method="post" onsubmit="checkForm()">  
<table id="mytable" border=3 > 
<c:forEach items="${users}" var="user"> 
<tr> 
    <td> 
    <input type="checkbox" id="saif" name="<c:out value="${user.hrid}" />" 
     value="<c:out value="${user.hrid}" />" /> 
    </td> 
</tr> 
</c:forEach> 
</table> 
<input TYPE="SUBMIT" value="Delete Selected HRs"/> 
</form> 
Javascript: 
    <script type="text/javascript"> 
function checkForm(){ 

    var checkt = document.getElementsById('saif'); 
    var chekSelect = false; 
    for (var i = 0; i < checkt.length; i++) { 
     var myElement = checkt[i]; 
     if (myElement.type === "checkbox" && myElement.checked) { 
      if (myElement.checked) { 
       chekSelect = true; 
       break; 
      } 
     } 
    } 
    if(!chekSelect) { 
     alert('Please Check Atleast one record to print cheque!!!'); 
     return false; 
    } else { 
     return true; 
    } 
} 
</script>` 

Answer 1

私はあなたが任意の特定の言語のフレームワークを使用している願っています。 MVC構造では、チェックボックスの存在を検証できます。 例えば、私はRuby on Railsでを使用していますが、私は私のチェックボックスフィールド

<%= f.label :active %> 
<%= f.check_box :active %> 

を持っている私は、私は、エラーを表示するように私のコントローラを介してフラッシュメッセージを印刷することができ

validates :active, presence: true 

としてチェックボックスを検証します。例えば： -

flash.now[:danger] = 'Invalid email/password combination' 

Answer 2

あなたのような、ここで変更することができますいくつかのこと：私たちはclass="item"

を使用していたこのデモのよう

• ではなく、IDのonsubmit
onsubmit="return checkForm()"などの使用クラスに復帰を追加し、最後に document.querySelectorを使用してチェックボックスのみを表示します。

DEMO：

function checkForm() { 
 
    if (document.querySelector('.item:checked')) { 
 
    alert('Checkbox is checked'); 
 
    return true; 
 
    } else { 
 
    alert('Please Check Atleast one record to print cheque!!!'); 
 
    return false; 
 
    } 
 
}

<form action="deleteselectedhr" name="deleteFiles" method="post" onsubmit="return checkForm()"> 
 
    <table id="mytable" border=1> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" class="item" value="1" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" class="item" value="2" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" class="item" value="3" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    <input TYPE="SUBMIT" value="Delete Selected HRs" /> 
 
</form>

Answer 3

function checkForm(e){ 
 
event.preventDefault() 
 
var a = document.querySelectorAll('#saif'); 
 
if(a[0].checked || a[1].checked || a[2].checked == true){ 
 
alert('Checkbox checked') 
 
}else{ 
 
alert('Please Check Atleast one record to print cheque!!!') 
 
} 
 
}

<form action="deleteselectedhr" name="deleteFiles" method="post" onsubmit="return checkForm()"> 
 
<table id="mytable" border=3 > 
 
<tr> 
 
    <td> 
 
    <input type="checkbox" id="saif" value="1" /><br/> 
 
     <input type="checkbox" id="saif" value="2" /><br/> 
 
     <input type="checkbox" id="saif" value="3" /> 
 
    </td> 
 
</tr> 
 
    
 
</table> 
 
<input TYPE="SUBMIT" value="Delete Selected HRs"/> 
 
</form>