form submit using ajax after validation using jquery validation plugin?

Question

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.

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

    });

Developer107 · Accepted Answer · 2016-04-22 05:54:10Z

1

try using submitHandler() of jquery validation plugin to submit form instead of 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;
    }
});

edited Apr 22, 2016 at 5:54

answered Apr 22, 2016 at 5:10

Developer107

1,7582 gold badges14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Rayon Over a year ago

Why do you need form.submit();?

Developer107 Over a year ago

@RayonDabre As you can see in documentation of validate plugin, we need to call default submit function in handler. Please refer - jqueryvalidation.org/validate

Rayon Over a year ago

Forget plugin, What does form.submit(); do ? It submits the form.. If we are doing it ajax way, do we need to submit the form ?

Developer107 Over a year ago

@RayonDabre I didn't have much idea about ajax so added the trigger but now I understand that when there is ajax, submit gets done by itself. Thank you for clearing my misconception.

Arun Kumaresh Over a year ago

error Uncaught SyntaxError: Unexpected end of input

|

madalinivascu · Accepted Answer · 2016-04-22 05:30:32Z

Use the success.form.bv event

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

         }
   });
});

not working due to input type="submit" the page keeps on reloading

Collectives™ on Stack Overflow

form submit using ajax after validation using jquery validation plugin?

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related