how to prevent jquery to validate and submit data at the same time
i was tasked by my team to build a system that will serve as programmatic prototype for our next project which will be developed using codeigniter and jquery. since i'm a new comer in web programming, it takes quite sometime for me to solve problems. and the following code has plagued me for two days.
$(function() {
var bln_valid = true;
$('#btn_save').click(function() {
$('.warning-label').html('');
if ($('#txt_customer_code').val() == '') {
// did user provide customer code?
$('#lbl_customer_code').html('Customer Code has to be filled in.');
bln_valid = false;
} else {
// is the code unique?
$.post('<?php echo base_url()."index.php/customer/is_code_exists" ?>', {
txt_customer_code : $('#txt_customer_code').val()
},
function(data) {
if(data.error == undefined) {
if (data['code_exists'] == 1) {
$('#lbl_customer_code').html('Customer Code is not available.');
bln_valid = false;
}
} else {
$('#lbl_customer_code').html('Customer Code is not available.');
bln_valid = false;
}
},'json'
);
}
if (bln_valid == false) {
return false;
} else {
// insert the code to database
$.post('<?php echo base_url()."index.php/customer/add" ?>', {
txt_customer_code : $('#txt_customer_code').val(),
},
function(data) {
if(data.error == undefined) {
$('#lbl_customer_code').html(data['key']);
if (data['key'] == '') {
$('#lbl_customer_code').html('Failed Saving.');
return false;
} else {
$('#lbl_customer_code').html('Successfully saving.');
}
} else {
$('#lbl_customer_code').html('Failed Saving.');
return false;
}
},'json');
}
});});
so i want to validate the uniqueness of customer code before i insert it to database. but it seems that the validation and insertion code, both using ajax, are executed almost simultaneously. bln_valid still retains its TRUE value when the insertion i开发者_开发知识库s started even though the customer code isn't unique.
- is there a way to allow the insertion code to run after the validation complete? i have read about jquery's queue but failed to grasp the concept and apply it to solve my problem.
- is there a more effective method to achieve the objective of validating and submit data?
i try not to use any plugins because i was told to keep the use of any external works as minimum as possible.
thanks for your help.
Jquery has lot of plugins for ajax submit and validation. Rather than writing your own logic, you can consider using them. I recommend
Jquery form plugin - Which submits the form through ajax. Remove the submit, make a button which on click submits the form through ajax.
Jquery Validation plugin - which validates everything based on the class. You can even write your own logic using .addValidator method.
Working example here
Have u try Event.PreventDefault() ?
精彩评论