title: jQuery validation with submit button disabled
body: <p>I made some sort of form validation. User can input name of group and group description. With jQuery I'm validating if group name is empty or not, if empty submit button should be disabled. Now I have problems with disabling submit button. If I click on input tag where group name is, then validation is ok, and submit button is disabled, but if I just click on submit button, without touching anything else, then jQuery skip validation and fires submit button although name of group is empty.
  I tried setting input tag in focus with jQuery but it only works if I actually click on that input tag.</p>
  
  <p>Submit button is 'saveGroup' button.</p>
  
  <p>Can someone tell me how to invoke click event on this input tag, or maybe I can use some other validation tehnique.</p>
  
  <pre><code>    &lt;div class="newGroupDiv"&gt;
              &lt;label&gt;Title: &lt;/label&gt;&lt;input type="text" id="groupTitle" onblur="checkTitle();"&gt;&lt;br&gt;
              &lt;label&gt;Description:&lt;/label&gt;&lt;br&gt;
              &lt;textarea id="groupDescription"&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;    
              &lt;button id="saveGroup"&gt;Save&lt;/button&gt;
              &lt;button id="cancelGroup"&gt;Cancel&lt;/button&gt;
              &lt;label id="groupError"&gt;&lt;/label&gt;
          &lt;/div&gt;
  
  ---------------------------------------------------------------------------------    
  
      $("#saveGroup").click(function(){
                  var variable = checkTitle();
                  if(variable == true){
                      if($("#groupError").html() == ""){
                          $(".columns").append('&lt;ul class="'+ $("#groupTitle").val() +'"&gt;&lt;li class="naslov"&gt;'+ $("#groupTitle").val() +'&lt;/li&gt;&lt;/ul&gt;');
                          $("ul").sortable({containment : 'document', 
                              tolerance: 'pointer', 
                              cursor: 'pointer', 
                              revert: 'true', 
                              opacity : 0.6, 
                              connectWith : "ul", 
                              placeholder: 'border', 
                              items : 'li:not(.naslov)', 
                              start : function(){
                                  check = false;
                                  $(".readContent").fadeOut(300);
                              }, stop : function(){
                                  check = true;
                              }}).disableSelection();
  
                          $.post("addGroup.php", {'title' : $("#groupTitle").val(), 'description' : $("#groupDescription").val(),
                          'color' : $("#colorHex").html(), 'color2' : $("#colorHex2").html()}, function(){
                              window.location.reload();
                          });
                      }
                  }
              });
  
  
  --------------------------------------------------------------------------------    
  
  
      var checkTitle = function(){
          $.post("checkTitle.php", {'title' : $("#groupTitle").val()}, function(data){
              if(data == 'exist') $("#groupError").html("Group already exists");
              if(data == 'no title') $("#groupError").html("Group title can't be empty");
              else if(data == 'ok') $("#groupError").html("");
          });
          return true;
      }
  </code></pre>
  
  <p>With this 'variable' I tried to accomplish some sort of callback wait, so when this variable gets result from function it should continue with rest of code, but I'm not sure if it works.</p>