javascript - 使用 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

尝试使用 jquery 验证插件的 submitHandler() 来提交表单而不是 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;
    }
});