在使用 jQuery 验证插件进行验证后，使用 AJAX 提交表单
form submit using ajax after validation using jquery validation plugin?
>我使用 jquery 插件进行验证，im 使用 ajax 提交表单，我需要在成功验证后提交表单，但即使验证发生，表单也会提交我尝试了以下代码，但在这里验证和表单提交同时发生。
<form class="form-horizontal cascade-forms" name="signup_form" id="signup_form" novalidate="novalidate" style="background:#f9f9f9;">
<input type="hidden" name="action" id="action" value="create" />
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Username</label>
<div class="col-lg-10 col-md-9">
<input type="text" class="form-control form-cascade-control input-small" name="username" id="username">
<input type="hidden" class="form-control form-cascade-control input-small" name="teacher_id" value="<?php echo $_SESSION['user_id']; ?>" >
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Gender</label>
<div class="col-lg-10 col-md-9">
<label><input type="radio" name="gender" value="male" checked>Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">User Role</label>
<div class="col-lg-10 col-md-9">
<select name="user_role" id="user_role" class="form-control" onChange="hide(); " required>
<option value="">Select Role</option>
<?php if($_SESSION['role'] == 1 ) { ?>
<option value="0">Student</option>
<?php } ?>
<?php if($_SESSION['role'] == 4) { ?>
<option value="1">Teacher</option>
<?php } ?>
</select>
</div>
</div>
<form class="form-horizontal cascade-forms" name="signup_form" id="signup_form" novalidate="novalidate" style="background:#f9f9f9;">
<input type="hidden" name="action" id="action" value="create" />
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Username</label>
<div class="col-lg-10 col-md-9">
<input type="text" class="form-control form-cascade-control input-small" name="username" id="username">
<input type="hidden" class="form-control form-cascade-control input-small" name="teacher_id" value="<?php echo $_SESSION['user_id']; ?>" >
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Gender</label>
<div class="col-lg-10 col-md-9">
<label><input type="radio" name="gender" value="male" checked>Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">User Role</label>
<div class="col-lg-10 col-md-9">
<select name="user_role" id="user_role" class="form-control" onChange="hide(); " required>
<option value="">Select Role</option>
<?php if($_SESSION['role'] == 1 ) { ?>
<option value="0">Student</option>
<?php } ?>
<?php if($_SESSION['role'] == 4) { ?>
<option value="1">Teacher</option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Department</label>
<div class="col-lg-10 col-md-9">
<select name="dept" id="id_dept" class="form-control" required>
<option value="">Select Department</option>
<option value="1">EE/EC </option>
<option value="2">CS</option>
<option value="3">ME</option>
<option value="4">Civil</option>
<option value="5">Math</option>
<option value="6">Chemical</option>
<option value="7">Common</option>
<option value="8">MME</option>
<option value="9">ED</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Semester</label>
<div class="col-lg-10 col-md-9">
<select name="sem" id="id_sem" class="form-control" required>
<option value="">Select Semester</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Name</label>
<div class="col-lg-10 col-md-9">
<input type="text" class="form-control form-cascade-control input-small" name="firstname" id="firstname" >
<p id="student_en"style=" font-size: 13px;color: red;padding: 5px;display:none" > Please ensure the student name as per certificate </p>
</div>
</div>
<div class="form-group" style="display:none;">
<label class="col-lg-2 col-md-3 control-label">Last Name</label>
<div class="col-lg-10 col-md-9">
<input type="text" class="form-control form-cascade-control input-small" name="lastname" id="lastname" >
</div>
</div>
<div class="form-group" id="mob_form" style="display:none">
<label class="col-lg-2 col-md-3 control-label">Mobile</label>
<div class="col-lg-10 col-md-9">
<input type="text" class="form-control form-cascade-control input-small" name="mobile" id="mobile">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Email</label>
<div class="col-lg-10 col-md-9">
<input type="text" class="form-control form-cascade-control input-small" name="email" id="email" maxlength="50">
</div>
</div>
<div class="form-actions">
<input type="submit" id="usersubmit" value="Submit" class="btn bg-success text-white btn-lg">
<input type="reset" value="Reset" class="btn bg-danger text-white btn-lg">
</div>
</form>
.JS：
$(document).ready(function(){
$("#signup_form").validate({
rules:{
required:{
required:true
},
user_role:{
required:true
},
username:{
required:true,
alphanum:true,
minlength: 5,
maxlength: 30
},
firstname:{
required:true,
alphacustom:true,
minlength: 5,
maxlength: 75
},
lastname:{
required:true,
alphanum:true,
minlength: 1,
maxlength: 30
},
email: {
required: true,
email: true
},
mobile: {
required: true,
number: true,
minnumber: 10,
maxnumber: 10
},
},
errorClass: "help-inline text-danger",
errorElement: "span",
highlight:function(element, errorClass, validClass) {
$(element).parents('.form-group').addClass('has-error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).parents('.form-group').removeClass('has-error');
$(element).parents('.form-group').addClass('has-success');
}
});
$('#signup_form').submit(function(e){
e.preventDefault();
$.ajax({
type: 'post',
url: 'submit.php',
data: $('form').serialize(),
success: function () {
alert("submitted");
}
});
return false;
});
});
尝试使用submitHandler()的jquery验证插件来提交表单而不是submit()。
submitHandler: function (form) {
console.log('test');
$.ajax({
type: 'post',
url: 'submit.php',
data: $('form').serialize(),
success: function () {
alert("submitted");
}
});
return false;
}
验证插件的完整调用将如下所示
$("#signup_form").validate({
rules: {
required: {
required: true
},
user_role: {
required: true
},
username: {
required: true,
alphanum: true,
minlength: 5,
maxlength: 30
},
firstname: {
required: true,
alphacustom: true,
minlength: 5,
maxlength: 75
},
lastname: {
required: true,
alphanum: true,
minlength: 1,
maxlength: 30
},
email: {
required: true,
email: true
},
mobile: {
required: true,
number: true,
minnumber: 10,
maxnumber: 10
},
},
errorClass: "help-inline text-danger",
errorElement: "span",
highlight: function(element, errorClass, validClass) {
$(element).parents('.form-group').addClass('has-error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).parents('.form-group').removeClass('has-error');
$(element).parents('.form-group').addClass('has-success');
},
submitHandler: function(form) {
console.log('test');
$.ajax({
type: 'post',
url: 'submit.php',
data: $('form').serialize(),
success: function() {
alert("submitted");
}
});
return false;
}
});
使用 success.form.bv 事件
$("#signup_form").validate({
rules:{
required:{
required:true
},
user_role:{
required:true
},
username:{
required:true,
alphanum:true,
minlength: 5,
maxlength: 30
},
firstname:{
required:true,
alphacustom:true,
minlength: 5,
maxlength: 75
},
lastname:{
required:true,
alphanum:true,
minlength: 1,
maxlength: 30
},
email: {
required: true,
email: true
},
mobile: {
required: true,
number: true,
minnumber: 10,
maxnumber: 10
},
},
errorClass: "help-inline text-danger",
errorElement: "span",
highlight:function(element, errorClass, validClass) {
$(element).parents('.form-group').addClass('has-error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).parents('.form-group').removeClass('has-error');
$(element).parents('.form-group').addClass('has-success');
}
}).on('success.form.bv',function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'submit.php',
data: $('#signup_form').serialize(),
success: function () {
alert("submitted");
}
});
});
相关文章：
- 'Ext Js'表单字段验证使用'验证器'
- 如何验证使用 ng-repeat、ng-show(角度）动态创建的输入
- 验证使用上传时的额外输入
- 通过 Github 进行身份验证(使用 everyauth）
- 使用正则表达式验证使用 DD-周一-YYYY 格式的日期
- 如何在多步jquery中添加表单步骤验证(使用单选按钮）
- JavaScript表单验证-使用Python和CGI检查空文本框
- 如何验证使用随机salt散列的密码
- Angularjs表单/字段验证使用JavaScript函数，无需指令
- jquery验证(使用jquery验证插件）-根据单击的按钮激活特定元素的验证规则
- 表单验证使用jQuery验证器具有相关的和排他的表单元素
- 通过iframe验证使用我的服务的网站
- 手机号码验证使用javascript
- PHP - Codeigniter验证使用json
- 验证使用json构建的选择菜单
- 表单验证使用HTML服务在谷歌应用脚本
- onkeypress电子邮件验证使用ajax js和php
- javascript日期验证使用字符串进行比较
- 在客户端验证使用JavaScript在文本框中只接受1到100之间的数字
- 引导表单验证——使用on click事件验证表单
