我是JavScript的新手,我正在尝试创建一个表单,要求在标记复选框后将信息输入到字段中,方法是切换所需的类。 我已经尝试了两天,如果选中“Gymnasium”框,则无法将“开始日期”设为必填字段。 任何帮助都会很棒。
这是我到目前为止所拥有的:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#gym").change(function(){
$("#togg1").toggle(this.checked);
$("#startDate").toggleClass("required");
$("#endDate").toggleClass("required");
$("#startTime").toggleClass("required");
$("#endTime").toggleClass("required");
if(this.checked){
$("#startDate").attr('required','required');
$("#endDate").attr('required','required');
$("#startTime").attr('required','required');
$("#endTime").attr('required','required');
}
else{
$("#startDate").removeAttr('required')
$("#endDate").removeAttr('required')
$("#startTime").removeAttr('required')
$("#endTime").removeAttr('required')
}
});
});
</script>
</head>
<body>
<div id="courseForm" style="width: 500px; border: 1px solid #000; padding: 50px 0 50px 50px;margin: 0 auto;">
<form id="serviceForm" action="#" onSubmit="required(this);" method="POST" enctype="text/plain">
<input name="orgid" type="hidden" value="000001" />
<input name="retURL" type="hidden" value="#" />
<label for="company">* Agency Requesting Facility:</label>
<br />
<input id="company" required="required" maxlength="50" name="company" size="50" type="text" />
<br />
<br />
<label for="name">* Agency Contact:</label>
<br />
<input id="name" required="required" maxlength="50" name="name" size="50" type="text" />
<br />
<br />
<label for="phone">* Contact Phone Number:</label>
<br />
<input id="phone" required="required" maxlength="14" name="phone" size="14" type="text" />
<br />
<br />
<br />Courses offered
<br />
<input id="gym" name="gym" type="checkbox" value="1" />Gymnasium
<br />
<span id="togg1" style="display:none">
<span id="togg2" style="display:inline">
<lable for="startDate">* Start Date:</lable>
<input id="startDate" maxlength="10" name="startDate" size="10" />
</span>
<span id="togg2" style="display:inline">
<lable for="endDate">* End Date:</lable>
<input id="endDate" maxlength="10" name="endDate" size="10" /><br /><br />
</span>
<span id="togg2" style="display:inline">
<lable for="startTime">* Start Time:</lable>
<input for="startTime" maxlength="7" name="startTime" size="7" />
</span>
<span id="togg2" style="display:inline">
<lable for="endTime">* End Time:</lable>
<input for="endTime" maxlength="7" mane="endTime" size="7" /><br />
</span>
</span>
<br />
<br />
<label for="description">Comments:</label>
<br />
<textarea name="description" cols="40" rows="5"></textarea>
<br />
<br />* denotes required fields
<br />
<input type="submit" name="submit" id="submit" value="SUBMIT" />
</form>
</div>
</body>
</html>
答案 0 :(得分:0)
您在“onSubmit”中调用“required”函数。这不是必要的和错误的,因为“必需”功能不存在。
然后,您必须添加以下行:
$("#serviceForm").validate();
在“$(document).ready”调用中,以便在DOM加载后执行。
这里有一个如何运作的例子:
我猜你使用以下插件: http://docs.jquery.com/Plugins/Validation
如果没有,你必须添加它。
对于validate插件,我认为你必须使用所需的类,而不是必需的属性。您正在将所需的属性与所需的属性混合,这是您可以在HTML5中使用的属性,但始终考虑并非所有浏览器都支持它。
有关此的一个很好的参考:
答案 1 :(得分:0)
您忘记添加&#39; required&#39;属性为&#39;开始日期&#39;
$(document).ready(function(){
$("#gym").change(function(){
$("#togg1").toggle(this.checked);
$("#startDate").toggleClass("required");
if(this.checked){
$("#startDate").attr('required','required');
}else{
$("#startDate").removeAttr('required')
}
});
});