JavaScript中的復選框驗證
[英]Check boxes validation in JavaScript
問題描述
我寫了這個腳本：
function getDays(select){
var selectedString = select.options[select.selectedIndex].value;
if(selectedString == 4)
{
document.getElementById("days_target").style.display = "block";
}else {
document.getElementById("days_target").style.display = "none";
}
}
在validateForm()函數中，我有以下內容：
var x=document.forms["form1"]["days"].value;
if (x==null || x=="" || x=="Select Days")
{
alert("Oh, you forgot to select days! :)");
return false;
}
var x=document.forms["form1"]["days"].value;
if(x=="4")
{
var cnt = 0;
for (var i = 7; i < document.day.elements.length; i++) {
if (document.day.elements[i].type == 'checkbox') {
if (document.day.elements[i].checked == true) {
cnt++;
}
}
}
if (cnt == 0) {
alert("Atleast 1 day Should be Selected.");
return false;
}
}
這樣的HTML：
<b>Please enter days required</b><br/>
<select name="days" id="days" style="width:200px;" onchange="getDays(this)">
<option value="Select Days" selected>Select Days</option>
<option value="1">Mon-Fri</option>
<option value="2">Mon-Fri</option>
<option value="3">Mon-Fri</option>
<option value="4">Bespoke Days</option>
</select><br/><br/>
<div id="days_target" style="display:none;">
<b>Select Days</b><br/>
<input type="checkbox" name="day" value="mon"/>Mon <input type="checkbox" name="day" value="tue"/>Tue<br/>
<input type="checkbox" name="day" value="wed"/>Wed <input type="checkbox" name="day" value="thr"/>Thr<br/>
<input type="checkbox" name="day" value="fri"/>Fri <input type="checkbox" name="day" value="sat"/>Sat<br/>
<input type="checkbox" name="day" value="sun"/>Sun<br/><br/>
</div>
如果我選擇“定制日期”，則會顯示該復選框，如果未選中任何復選框，則我想顯示錯誤消息“應選擇“至少一日”。 這個怎么做？
2 個解決方案
解決方案1
0 2013-05-06 13:12:56
jQuery中的after函數可以讓您輕松地做到這一點。 這將需要兩個步驟。
通過將其放入HTML（
<head></head>）的header標記中來加載Jquery：<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>不滿足條件時在驗證中添加javascript：
$('#days').after('<label class="error">Atleast one day should be selected.</label.');
此外，當您滿足驗證規則時，您將希望錯誤消息消失。
-
$('.error').remove();
您可能需要調整HTML / CSS以用於顯示目的，但這應該足以使您前進。
解決方案2
0 2013-05-06 13:13:48
您正在錯誤地訪問復選框。 表單具有元素。 同樣，您從7開始計數，而不是從0開始計數，然后從6開始計數。
var day = document.forms["form1"].day;
for (var i = 0; i < day.length; i++) {
if (day[i].type == 'checkbox') {
if (day[i].checked == true) {
cnt++;
}
}
}
我會這樣做：
var x=document.forms["form1"]["days"].selectedIndex;
if (x<1) {
alert("Please select days");
return false;
}
else if(x==4) { // fifth entry
var checked = false, chk = document.forms["form1"]["day"];
for (var i = 0; i < chk.length; i++) {
if (chk[i].checked) { checked=true; break }
}
if (!checked) {
alert("At least one day should be checked.");
return false;
}
}
Javascript表單驗證單選和復選框
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.