Question

我写过这个剧本：

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 &nbsp;&nbsp;<input type="checkbox" name="day" value="tue"/>Tue<br/>
    <input type="checkbox" name="day" value="wed"/>Wed &nbsp;&nbsp;<input type="checkbox" name="day" value="thr"/>Thr<br/>
    <input type="checkbox" name="day" value="fri"/>Fri &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="day" value="sat"/>Sat<br/>
    <input type="checkbox" name="day" value="sun"/>Sun<br/><br/>
</div>

如果我选择Bespoke days，则会出现复选框，如果没有选中，则我想显示错误消息“应该选择Atleast one day”。怎么做？

Answer 1

jquery中的函数后，您可以轻松地执行此操作。这需要两个步骤。

通过将此标记放入HTML（<head></head>）中的标题标记内来加载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以用于显示目的，但这应该足以让您前进。

Answer 2

您正在错误地访问复选框。表格有元素。你也从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++;
        }
    }
}

我会这样做：

的 Live Demo

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中复选框验证

2 个答案: