Problem to call javascript validate function before form submit on an ajax call.

Problem to call javascript validate function before form submit on an ajax call.

 
Here is my validate() function, returns either true or false.
My problen is i want to call ajax submit form code only if validate() returns true, otherwise it will show the alert with error messages for not valid data and stay in page. Please help!!

function validate()
{
var msg = "";
var bDate = $('input[name="txtBDate"]').val();
var eDate = $('input[name="txtEDate"]').val();
var abDate = $('input[name="abd"]').val();
var aeDate = $('input[name="aed"]').val();
var txtMax = $('input[name="txtM"]').val();






if (!validDate(bDate))
msg += "o Begin Date is not a valid date.\n";
if (!validDate(eDate))
msg += "o End Date is not a valid date.\n";
if (compareDate(bDate, eDate))
msg += "o Begin Date must be less than or equal to End Date.\n";
if (compareDate(abDate, bDate) || compareDate(eDate, aeDate))
msg += "o Date entered are out of the available date range.\n";
if (calculateDays(bDate, eDate) > 30)
msg += "o Date range cannot be more than 30 days.\n";








if (isBlank(txtM))
msg += "o Maxmust be entered.\n";

if (!isNumber(txtM) || (txtM.length > 0 && txtM.length < 10))
msg += "o Maxmust be numeric and 10 digits in length.\n";

if (msg > "") {
msg = "Problems with data entry:\n" + msg;
alert(msg);
return false;
}
else {




return true;
}
}

Here is my Jquery/ajax code

$(document).ready(function(){
$("#simple-post").click(function()
{
$("#ajaxform").submit(function(e)
{
// getting the values of both firstname and lastname
var beginDate = $('input[name="txtBDate"]').val();
var endDate = $('input[name="txtEDate"]').val();
var maxVal = $('input[name="txtM"]').val();
// posting the values
var dataString = 'beginDate=' + beginDate + '&endDate=' + endDate+ '&maxVal=' + maxVal;
alert(dataString);
var formURL = $(this).attr("action");
//alert(formURL);
$.ajax(
{
url : formURL,
dataType:'json',
async: false,
data: dataString,
success:function(data){
queryObject = eval('(' + JSON.stringify(data) + ')');
queryObjectLen = queryObject.empdetails.length;
drawChart();
},
error : function(xhr, type) {
alert('server error occoured')
}
});
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
});
$("#ajaxform").submit(); //Submit the FORM
});
































});

Hete is my HTML code

<form name="ajaxform" id="ajaxform" action="getData.jsp" onsubmit="return validate();" method="POST">
<table align="left" width="100%" border="1" bgcolor="#ffffff" bordercolordark="white" bordercolorlight="gray" cellpadding="2" cellspacing="0"><tr><td>
<table border="0" bgcolor="#ffffff" width="100%">

<tr>
<td align="right" valign="top">Begin Date:</td>
<td valign="top">
<input type="text" name="txtBDate" id="txtBID" value="&lt;%= strBDate %&gt;" size="10" maxlength="10" onblur="doFormatDate(this)">
</td>
<td align="right" valign="top">MDN:</td>
<td valign="top"><input type="text" name="txtM" id="txtMaxID" value="&lt;%= strM %&gt;" size="15" maxlength="15" onkeyup="removeStuff(this)" onblur="removeStuff(this)" onpaste="return removeStuff(this)"></td>
</tr>
<tr>
<td align="right" valign="top">End Date:</td>
<td valign="top">
<input type="text" name="txtEDate" id="txtEID" value="&lt;%= strEDate %&gt;" size="10" maxlength="10" onblur="doFormatDate(this)">
</td>











</tr>
</table>
</td></tr></table>
</form>
<button class="btn btn-info" id="simple-post">Run Code</button>
<div id="chart_div" style="width: 900px; height: 500px;"></div>



<input type="hidden" name="abd" id="abdID" value="&lt;%= strDataBegin %&gt;">
<input type="hidden" name="aed" id="aedID" value="&lt;%= strDataEnd %&gt;">