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

Question

我使用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：

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

    });

Answer 1

尝试使用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;
    }
});

Answer 2

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

         }
   });
});