Javascript 使用jquery验证插件验证后使用ajax提交表单?
我使用jquery插件进行验证,我使用ajax提交表单我需要在成功验证后提交表单,但是表单被提交了,即使验证发生了我也尝试了以下代码,但是在这里验证和表单提交同时发生Javascript 使用jquery验证插件验证后使用ajax提交表单?,javascript,jquery,ajax,Javascript,Jquery,Ajax,我使用jquery插件进行验证,我使用ajax提交表单我需要在成功验证后提交表单,但是表单被提交了,即使验证发生了我也尝试了以下代码,但是在这里验证和表单提交同时发生 <form class="form-horizontal cascade-forms" name="signup_form" id="signup_form" novalidate="novalidate" style="background:#f9f9f9;"> <input type="hidden
<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>
尝试使用jquery验证插件的
submitHandler()
来提交表单,而不是submit()
验证插件的完整调用如下所示
$("#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");
}
});
});
为什么需要
form.submit()
?@RayonDabre正如您在validate
插件的文档中所看到的,我们需要在处理程序中调用defaultsubmit
函数。请参考-忘记插件,form.submit()的作用代码>做什么?它提交了表格。。如果我们用ajaxajax
的方式,我们需要提交表单吗?@RayonDabre我对ajax不太了解,所以添加了触发器,但现在我明白了,如果有ajax,提交就可以自己完成。感谢您消除我的误解。错误未捕获语法错误:由于input type=“submit”页面继续重新加载,input无法正常工作
$("#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;
}
});
$("#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");
}
});
});