j查询验证表单隐藏显示不起作用

Question

我正在使用jQuery Validing插件验证表单，但是每次提交表单时，页面都会重定向到操作页面。我不仅在验证表单，而且在知道表单没有错误后尝试使用 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>

Answer 1

您必须在单击提交按钮时阻止默认浏览器行为(提交服务器端(，例如

$("#save-teachers").click(function (event) {
event.preventDefault();
$("#teachers-forms").hide();
$("#teachers-lists").fadeIn();
});

或

$("#teachers-forms").submit(function (event) {
event.preventDefault();
});

您可以看到 防止默认 在表单提交 jQuery 和 event.preventDefault(( vs. 返回 false 以获取更多详细信息。

Answer 2

您在验证中使用了错误的 ID。

您的表格是 ：teachers-forms您将验证应用于：$( "#communicated-teachers-forms" )

只需写：

$( "#teachers-forms" ).validate.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."
}
});