shubham yadav shubham yadav - 9 months ago 32
Ajax Question

both ajax and jquery validation plugin not working at same time

this is my code i want to validate all user fileds then insert data into database but in this if i put validation code and ajax code simultaneously then it is not working but individually both codes working good. if i comment out ajax code then validation code working fine and vice versa



<script>


//validation
$(document).ready(function () {

//toatsr success
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
//toatr
//error toster
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
//error toaster

// Setup form validation on the #register-form element
$("#contactus_form").validate({

// Specify the validation rules
rules: {
name: "required",
contact: "required",
degree: "required",
applying_for: "required",
experience: "required",
user_cv: "required",
email: {
required: true,
email: true
}


},

// Specify the validation error messages
messages: {
name: "Please enter your first name",
contact: "Please enter your contact number",
degree: "Please enter your Qualification",
experience: "Please enter your experience",
user_cv: "Please select Your Cv",
applying_for: "Please accept our policy",
email: "Please enter a valid email address"

},

submitHandler: function (form) {
form.ajaxsubmit();
}
// alert("alert");
});


$("#submit").click(function () {
//alert("alert");
var name = $("#name").val();
var email = $("#email").val();
//var password = $("#password").val();
var contact = $("#contact").val();
var applying_for = $("#applying_for").val();

var degree = $("#degree").val();
var experience = $("#experience").val();
//var user_cv = $("#user_cv").val();
//form data

var form_data = new FormData();
var file_data = $('#user_cv').prop('files')[0]; // here pic is the id of input type image
form_data.append('user_cv', file_data);
//
form_data.append('name1', name);
form_data.append('email1', email);
form_data.append('contact', contact);
form_data.append('degree', degree);
form_data.append('applying_for', applying_for);
form_data.append('experience', experience);


//var password = $("#password").val();
// Returns successful data submission message when the entered information is stored in database.
//var dataString = 'name1='+ name + '&email1='+ email + '&contact='+ contact+ '&degree='+ degree+ '&applying_for='+ applying_for+ '&user_cv='+ user_cv+ '&experience='+ experience;
if (name == '' || email == '' || applying_for == '' || contact == '' || experience == '')
{
//alert("Please Fill All Fields");
toastr["warning"]("All Fields are required.")
} else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "ajaxsubmit.php",
enctype: 'multipart/form-data',
data: form_data,
cache: false,
contentType: false,
processData: false,
success: function (result) {
$('#myModal').modal('hide');

toastr["success"]("Your submission has been sent successfully.", "Success")
$("form").trigger("reset");
//alert(result);
}
});
}
return false;
});
});
</script>

<form action="" method="post" id="contactus_form" novalidate="novalidate" enctype="multipart/form-data">
<div class="form-group">
<input type="text" id="name" name="name" class="form-control contro" value="" placeholder="Name*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name*'">
</div>
<div class="form-group">
<input type="text" id="email" name="email" class="form-control contro" value="" placeholder="Email*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email*'">
</div>
<div class="form-group">
<input type="text" id="contact" name="contact" class="form-control contro" value="" placeholder="Contact Number*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Contact number'">
</div>
<div class="form-group">
<!-- <input type="text" id="degree"class="form-control contro" value="" placeholder="Highest Degree*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Highest Degree'">
-->
<select id="degree" name="degree" class="form-control">
<option value="Highest Degree ">Highest Degree </option>
<option value="Highest Degree ">Highest Degree </option>
</select>
</div>
<div class="form-group">
<input type="text" id="applying_for" name="applying_for" class="form-control contro" value="" placeholder="Applying For" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Applying For'">
</div>
<div class="form-group">
<input type="text" id="experience" name="experience" class="form-control contro" value="" placeholder="Experince in Year" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Experince in Year'">
</div>
<div class="form-group">
<div class="field">
<input type="file" name="user_cv" id="user_cv" class="inputfile inputfile-6" />
<label for="user_cv" class="file-upload"> <span class="form-control attach" id="user_cv_name">Upload Resume</span>
<strong class="browse-btn butn">Browse</strong></label>
</div>

</div>
<button id="submit" name="submit" type="submit" class="btn-style sub">SUBMIT</button>
</form>




Answer Source

The best way to use validation and ajax() is:

$('#formId').validate({
    rules:{
        // rules here
    },
    messages:{
        // messages here
    }
});

hold the form sumbit

$('#formId').submit(function(e){
    e.preventDefault();
});

Initiate validation check on submit button click

$('#btn').click(function(){
    if( $('#formId').valid() )
    {
        // ajax call here
    }
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download