title: jquery ajax call after javascript validation function
body: <p>I am trying to call my ajax code after my js validate() methods returns true on submit of the searchId button. But the ajax code is not executing. if I place an alert there it works fine.
  Where I am doing wrong? Please help!!</p>
  
  <p>here is my javascript code</p>
  
  <pre><code>  &lt;script language="JavaScript"&gt;
    function validate()
    {
      var msg = "";
       //all my field validations are here
       msg += "o  Name is not a valid name.\n";
  
     if (msg &gt; "") {
             alert(msg);
          return false;
        }
      else {
        return true;
        }
    }
  
   $(document).ready(function(){              
               $("#simple-post").click(function()
              {                
               $("#ajaxform").submit(function(e)
                  {
  
                       // getting the values of both firstname and lastname        
                       var beginDate = $('input[name="txtBeginDate"]').val();        
                       var endDate = $('input[name="txtEndDate"]').val();   
                       var mdnVal = $('input[name="txtMsid"]').val();                      
                       // posting the values        
                       var dataString = 'beginDate=' + beginDate + '&amp;endDate=' + endDate+ '&amp;mdnVal=' + mdnVal;
                       alert(dataString);
                       var formURL = $(this).attr("action");  
  
                      //alert(formURL);                       
                      $.ajax(
                      {
                          url : formURL,                          
                          dataType:'json',
                          async: false, 
                          data: dataString,
                          beforeSubmit: validate,
                          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
              });
  
           });
  </code></pre>
  
  <p>Here is my HTML code</p>
  
  <pre><code>&lt;form name="ajaxform" id="ajaxform"  action="getData.jsp" onSubmit="return validate();"    method="POST"&gt;
     &lt;Table&gt;
  
           &lt;input type="submit" name="action" value="Search" id="searchId"&gt;
           &lt;input type="text" name="name" id="id"  size="10" maxlength="10"&gt;
                     //other input fields    
  
        &lt;/table&gt;
      &lt;/form&gt;
      &lt;button class="btn btn-info" id="simple-post"&gt;Run Code&lt;/button&gt;
      &lt;div id="chart_div" style="width: 900px; height: 500px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I have updated my code, i can submit my form, but the validation not working. I am using beforeSubmit: validate, still i dont see my validation messages. Please help.</p>