我有三列表单，第一列有输入字段，接下来的两列有复选框，如果我提交我的表单而不输入任何内容，那么页面顶部的第二列和第三列会出现警报，然后第 1 列会出现警报消息。这里如何使用这个方法？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Study Schedule</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="page-header">
<div class="well">
<h1 align="center" style="color:Brown;"><b>Study Schedule </b> </h1>
</div>
</div>
<form>
<div class="container">
<div class="row">
<!--Column 1-->
<div class="col-lg-3 jumbotron">
<div class="form-group">
<span><b>Teacher Name</b></span>
<span class="glyphicon glyphicon-asterisk"></span>
<select class="form-control" required >
<option value="">Select name</option>
<option>Rachna</option>
<option>Sanjay</option>
<option>Seema</option>
<option>Shivani</option>
<option>Roop Singh</option>
<option>Satnaam</option>
<option>Rakesh</option>
<option>Shalini</option>
</select> </div>
<div class="form-group">
<span><b>Teacher Name</b></span>
<select class="form-control">
<option value="">Select name</option>
<option>Rachna</option>
<option>Sanjay</option>
<option>Seema</option>
<option>Shivani</option>
<option>Roop Singh</option>
<option>Satnaam</option>
<option>Rakesh</option>
<option>Shalini</option>
</select>
</div>
<div class="form-group">
<span><b>Teacher Name</b></span>
<select class="form-control">
<option value="">Select name</option>
<option>Rachna</option>
<option>Sanjay</option>
<option>Seema</option>
<option>Shivani</option>
<option>Roop Singh</option>
<option>Satnaam</option>
<option>Rakesh</option>
<option>Shalini</option>
</select>
</div>
<div class="form-group">
<span><b>Teacher Name</b></span>
<select class="form-control">
<option value="">Select name</option>
<option>Rachna</option>
<option>Sanjay</option>
<option>Seema</option>
<option>Shivani</option>
<option>Roop Singh</option>
<option>Satnaam</option>
<option>Rakesh</option>
<option>Shalini</option>
</select>
</div>
<div class="form-group">
<span><b>Teacher Name</b></span>
<select class="form-control">
<option value="">Select name</option>
<option>Rachna</option>
<option>Sanjay</option>
<option>Seema</option>
<option>Shivani</option>
<option>Roop Singh</option>
<option>Satnaam</option>
<option>Rakesh</option>
<option>Shalini</option>
</select>
</div>
</div>
<div class="col-lg-1">
</div>
<!--Column 2-->
<div class="col-lg-3 jumbotron">
<!--Row 1-->
<div class="row">
<b>Subject</b>
<span class="glyphicon glyphicon-asterisk"></span>
<div class="input-group">
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >S1</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >S2</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >S3</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >S4</label>
<script type="text/javascript">
function validate()
{
var flag=0;
var chks = document.getElementsByName('chk[]');
var hasChecked = false;
for(var i=0;i<chks.length;i++)
{
if(chks[i].checked)
{
hasChecked = true;
break;
}
}
if(hasChecked==false)
{
alert("Please select atleast one subject");
return false;
}
if(flag==1)
{
var chks = document.getElementsByName('chk[]');
var hasChecked = false;
for(var i=0;i<chks.length;i++)
{
if(chks[i].checked)
{
hasChecked = true;
break;
}
}
if(hasChecked==false)
{
alert("Please select atleast one Day");
return false;
}
return true;
}
}
</script>
</div>
</div>
<!--Row 2-->
<div class="row">
<b>Subject</b>
<div class="input-group">
<label class="checkbox-inline"> <input type="checkbox" value="" >S1</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S2</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S3</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S4</label>
</div>
</div>
<!--Row 3-->
<div class="row">
<b>Subject</b>
<div class="input-group">
<label class="checkbox-inline"> <input type="checkbox" value="" >S1</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S2</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S3</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S4</label>
</div>
</div>
<!--Row 4-->
<div class="row">
<b>Subject</b>
<div class="input-group">
<label class="checkbox-inline"> <input type="checkbox" value="" >S1</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S2</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S3</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S4</label>
</div>
</div>
<!--Row 5-->
<div class="row">
<b> Subject</b>
<div class="input-group">
<label class="checkbox-inline"> <input type="checkbox" value="" >S1</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S2</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S3</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S4</label>
</div>
</div>
</div>
<div class="col-lg-1">
</div>
<!--Column 3-->
<div class="col-lg-4 jumbotron">
<!--Row 1-->
<div class="row">
<b>Class Days</b>
<span class="glyphicon glyphicon-asterisk"></span>
<div class="input-group">
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Mon</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Tue</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Wed</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Thr</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Fri</label>
<script type="text/javascript">
function day()
{
var chks = document.getElementsByName('chk[]');
var hasChecked = false;
for(var i=0;i<chks.length;i++)
{
if(chks[i].checked)
{
hasChecked = true;
break;
}
}
if(hasChecked==false)
{
alert("Please select atleast one day");
return false;
}
return true;
}
</script>
</div>
</div>
<!--Row 2-->
<div class="row">
<b>Class Days</b>
<div class="input-group">
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Mon</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Tue</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Wed</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Thr</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Fri</label>
</div>
</div>
<!--Row 3-->
<div class="row">
<b>Class Days</b>
<div class="input-group">
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Mon</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Tue</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Wed</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Thr</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Fri</label>
</div>
</div>
<!--Row 4-->
<div class="row">
<b>Class Days</b>
<div class="input-group">
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Mon</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Tue</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Wed</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Thr</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Fri</label>
</div>
</div>
<!--Row 5-->
<div class="row">
<b> Class Days</b>
<div class="input-group">
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Mon</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Tue</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Wed</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Thr</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Fri</label>
</div>
</div>
</div>
<br>
<br>
<div class="col-lg-10">
<b>Prinicipal Name</b>
<span class="glyphicon glyphicon-asterisk"></span>
<input type="text" class="form-control" placeholder="Enter Name" required>
</div>
<br>
<div class="col-lg-4">
<b>Date of schedule Application</b>
<span class="glyphicon glyphicon-asterisk"></span>
<div class="form-group">
<div class='input-group date' id="datetimepicker1">
<input type='text' class="form-control" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datepicker();
});
</script>
</div>
<div class="col-lg-10" align="center">
<div class="row">
<div class ="btn btn-info" role="button">
<input type="Submit" class="btn btn-info" value="Submit" onclick="validate();">
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</form>
</body>
</html>
最佳答案
在 validate() 函数中，您使用第二列作为初始值。使用第一列并在提交按钮中像这样返回 onclick="return validate()"
关于javascript - 如何在表单中应用 checkValidity()？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37967250/