使用jquery验证插件验证后使用ajax提交表单？

Im using jquery plugin for validation and im using the ajax for submitting the form i need to submit the form after the successfull validation but the form get submitted even though the validation occurs i have tried the following code but here the both validation and form submission gets occurs at same time.

我使用jquery插件进行验证，我使用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:

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;
        });

    });

2 个解决方案

#1

try using submitHandler() of jquery validation plugin to submit form instead of submit().

尝试使用jquery验证插件的submitHandler（）来提交表单而不是submit（）。

submitHandler: function (form) {
   console.log('test');
   $.ajax({
         type: 'post',
         url: 'submit.php',
         data: $('form').serialize(),
         success: function () {

             alert("submitted");

         }
   });
   return false;
}

The complete call to validate plugin will look like this

验证插件的完整调用将如下所示

$("#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;
    }
});

#2

Use the success.form.bv event

使用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");

         }
   });
});