标记复选框后的必填字段
Required field after checkbox is marked
我对javascript非常陌生,我正在尝试创建一个表单,需要在标记复选框后将信息输入到字段中,通过切换所需的类。我已经尝试了两天,如果选中了"体育馆"框,我无法将"开始日期"设置为必填字段。如果有任何帮助就太好了。
到目前为止我写的是:
<!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>
忘记给'Start Date'添加'required'属性
$(document).ready(function(){
$("#gym").change(function(){
$("#togg1").toggle(this.checked);
$("#startDate").toggleClass("required");
if(this.checked){
$("#startDate").attr('required','required');
}else{
$("#startDate").removeAttr('required')
}
});
});
在"onSubmit"中调用"required"函数。这是不必要的,也是错误的,因为"required"函数不存在。
然后,您必须添加以下行:
$("#serviceForm").validate();
在"$(document)"中。调用ready",以便在DOM加载后执行。
这里有一个如何工作的例子:
http://jsfiddle.net/4rscN/我假设你使用以下插件:http://docs.jquery.com/Plugins/Validation
如果没有,你必须添加。
对于validate插件,我认为您必须使用必需的类,而不是必需的属性。你混合了class required和attribute required,这是一个你可以在HTML5中使用的属性,但是要考虑到并不是所有的浏览器都支持它。
关于这个的一个很好的参考:
http://caniuse.com/搜索所需=
相关文章:
- Kendo UI网格复选框列字段未定义
- Rad网格编辑模式通过选中复选框时的java脚本启用禁用所需的字段验证器
- 使用javascript提交表单并从字段/单选框/复选框/文本区域获取数据
- 如何获取字段集元素中复选框的所有ID
- 如何获取多个复选框值并分配给隐藏字段
- 显示/隐藏表单字段复选框选中/未选中
- j查询检查复选框是否被选中,然后向输入字段添加值
- KO 绑定复选框:从代码更改“选中”属性,不更改可观察字段
- 单击“角度”复选框时更新不相关的字段
- 在其他文本输入字段中输入文本时启用复选框
- JQuery:如何检查复选框是否被选中并向字段添加属性
- 取消选中特定复选框时,React切换不删除的选择字段
- 当输入字段(文本框)有值时,选中/取消选中复选框
- 在克隆复选框字段后,使用jQuery获取(并更改)该字段的名称
- 如何提交表单中的所有复选框字段
- 复选框,将所有已完成的输入字段复制到下面的字段
- 如果选中复选框,则将值添加到输入字段
- 使用隐藏字段值而不是复选框值计算合计
- JS - jQuery - 启用禁用表单字段复选框
- 使用<重置所有字段(复选框、文本、选择);body onload()">