0

我写了这个脚本：

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>

如果我选择定制天数，则会出现该复选框，如果未选中任何复选框，则我想显示错误消息“应选择至少一天”。这个怎么做？

4

2 回答 2

0

您访问的复选框不正确。表单有元素。您也可以从 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;
  }
}
于 2013-05-06T13:13:48.120 回答
0

jquery 中的after函数可以让您轻松地做到这一点。这将需要两个步骤。

  1. 通过将其放在 HTML ( <head></head>) 中的标头标记中来加载 Jquery：

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

  2. 不满足条件时在验证中添加javascript：

    $('#days').after('<label class="error">Atleast one day should be selected.</label.');

此外，当满足验证规则时，您会希望错误消息消失。

  1. $('.error').remove();

您可能需要调整 HTML/CSS 以用于显示目的，但这应该足以让您继续前进。

于 2013-05-06T13:12:56.340 回答