html - jquery验证表单隐藏显示不起作用
问题描述
我正在使用 jQuery Validate 插件验证表单,但每次我提交表单时,页面都会重定向到操作页面。我不仅在验证表单,而且在知道表单没有错误后尝试使用 ajax 提交表单。
这是我用于自定义 JS 编码的 javascript 文件。
<script type="text/javascript">
$(document).ready(function(){
$("#add-teachers").click(function () {
$("#teachers-lists").hide();
$("#teachers-forms").fadeIn();
});
$("#save-teachers").click(function () {
$("#teachers-forms").hide();
$("#teachers-lists").fadeIn();
});
$( "#teachers-forms" ).validate({
ignore: 'hidden',
rules: {
name: "required",
profession: "required",
teacher_type: "required",
extended_date: "required",
validity_duration: "required",
},
messages: {
name: "Please enter it."
profession: "Please enter it."
teacher_type: "Please select it."
extended_date: "Please enter it."
validity_duration: "Please select it."
}
});
});
</script>
这是html表单代码
<form id="teachers-forms" method="post">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-md-3" for="name">First & Last name</label>
<div class="col-md-9">
<input type="text" id="name" name="name" class="form-control col-md-12">
</div>
</div>
<div class="form-group">
<label class="col-md-3" for="profession">Profession</label>
<div class="col-md-9">
<input type="text" id="profession" name="profession" class="form-control col-md-12">
</div>
</div>
<div class="form-group">
<label class="col-md-3" for="issue_date">Issue Date</label>
<div class="col-md-9">
<input type="text" id="issue_date" name="issue_date" class="form-control col-md-12">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-md-3" for="teachertype-check-label">Teacher Type</label>
<div class="col-md-9">
<div class="radio">
<label>
<input type="radio" name="teacher_type" id="teacher_type" value="0">Always
</label>
<label>
<input type="radio" name="teacher_type" id="teacher_type" value="1">Temporary
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3" for="extended_date">Extended Date</label>
<div class="col-md-9">
<input type="text" id="extended_date" name="extended_date" class="form-control col-md-12">
</div>
</div>
<div class="form-group">
<label class="col-md-3" for="validity_duration_label">Validity Duration</label>
<div class="col-md-9">
<div class="radio">
<label>
<input type="radio" name="validity_duration" id="validity_duration" value="1">1 years
</label>
<label>
<input type="radio" name="validity_duration" id="validity_duration" value="2">2 years
</label>
<label>
<input type="radio" name="validity_duration" id="validity_duration" value="3">3 years
</label>
<label>
<input type="radio" name="validity_duration" id="validity_duration" value="4">4 years
</label>
<label>
<input type="radio" name="validity_duration" id="validity_duration" value="5">5 years
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<button id="save-teachers" type="submit" class="btn btn-success pull-left col-md-4 btn-lg">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span> SAVE
</button>
</div>
</form>
<div id="teachers-lists">
<div class="row">
<button id="add-teachers" type="button" class="btn btn-success pull-left col-md-4 btn-lg">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add new teacher
</button>
</div>
<div class="row">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>First & Last name</th>
<th>Profession</th>
<th>Issue Date</th>
<th>Teacher Type</th>
<th>Extended Date</th>
<th>Validity Duration</th>
<th>The Operators</th>
</tr>
</thead>
<tbody id="data_teachers">
</tbody>
</table>
</div>
</div>
</div>
解决方案
您必须在单击提交按钮时阻止默认浏览器行为(提交服务器端),例如
$("#save-teachers").click(function (event) {
event.preventDefault();
$("#teachers-forms").hide();
$("#teachers-lists").fadeIn();
});
或者
$("#teachers-forms").submit(function (event) {
event.preventDefault();
});
您可以在表单提交 jQuery和event.preventDefault() 上查看防止默认值与返回 false以了解更多详细信息。
推荐阅读
- java - 为什么我的 Springboot 主方法在代码中只调用一次时启动 2 个线程?
- dafny - 是否存在将不变量更改为确保子句的一种解决方案?
- angular9 - 在新数据到来时创建要素后,我替换图层源但在地图上仍删除可见的要素(ArcGIS-js-api 4)
- python - 泡菜和追加的区别
- swagger - 如何让 JHipster 6.10 生成开放 api 3.0。代替或补充 Swagger 2 的文档
- ruby - 在 Ruby 中快速访问大型 CSV 文件中的各个行
- php - Eclipse IDE PHP 2020-06 测试服务器
- c# - 将多个刚体分配给功能
- java - 如何在java中打开csv文件时设置新密码
- typescript - 无法使用 Angular CLI 创建组件