Arun Kumaresh Arun Kumaresh - 7 months ago 10
Javascript Question

form submit using ajax after validation using jquery validation plugin?

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

});

Answer

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