禁用提交按鈕jQuery驗證

Question

我做了某種形式的驗證。用戶可以輸入組名和組描述。有了jQuery，我正在驗證組名是否爲空，如果空提交按鈕應該被禁用。現在我遇到了禁用提交按鈕的問題。如果我點擊組名稱的輸入標籤，那麼驗證是可以的，並且提交按鈕被禁用，但是如果我只是點擊提交按鈕，而不觸及其他任何東西，那麼jQuery跳過驗證並激發提交按鈕，儘管組名稱爲空。 我試着用jQuery設置輸入標籤的焦點，但它只有在我實際上點擊該輸入標籤時才起作用。

提交按鈕是'saveGroup'按鈕。

有人可以告訴我如何在這個輸入標籤上調用點擊事件，或者我可以使用其他驗證技巧。

<div class="newGroupDiv"> 
      <label>Title: </label><input type="text" id="groupTitle" onblur="checkTitle();"><br> 
      <label>Description:</label><br> 
      <textarea id="groupDescription"></textarea><br><br>  
      <button id="saveGroup">Save</button> 
      <button id="cancelGroup">Cancel</button> 
      <label id="groupError"></label> 
     </div> 

---------------------------------------------------------------------------------  

    $("#saveGroup").click(function(){ 
       var variable = checkTitle(); 
       if(variable == true){ 
        if($("#groupError").html() == ""){ 
         $(".columns").append('<ul class="'+ $("#groupTitle").val() +'"><li class="naslov">'+ $("#groupTitle").val() +'</li></ul>'); 
         $("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; 
    } 

有了這個「變量」我試圖完成某種回調等待，所以當這個變量會從函數的結果應該繼續的代碼休息，但我不知道它是否工作。

Answer 1

你會更好地改變你在這裏做事的方式。首先，正如我所說的，確保在不執行任何Ajax調用的情況下執行「isEmpty」檢查。 Javascript完全有能力自己做。其次，不是檢查元素中的HTML，而是更好地檢查checkTitle（）函數的結果。由於檢測到的HTML仍然存在，因此if($("#groupError").html() == ""){可能會失敗。

以上評論導致此javascript：

function checkTitle() { 
    $groupTitle = $('#groupTitle').val(); 

    if($groupTitle == "") { 
     $("#groupError").html("Group title can't be empty"); 
     return false; 
    } else { 
     $.post("checkTitle.php", {'title' : $groupTitle }, function(data){ 
      if(data == 'exist') { 
       $("#groupError").html("Group already exists"); 
       return false; 
      } else if(data == 'ok') { 
       $("#groupError").html(""); 
       return true; 
      } 
     }); 
    } 
} 

現在checkTitle（）函數的結果可以在您執行的onblur和的onClick最後檢查中使用。讓我們繼續用你的HTML：

<div class="newGroupDiv"> 
    <label>Title: </label> 
    <input type="text" id="groupTitle" onblur="checkTitle();"><br> 

    <label>Description:</label><br> 
    <textarea id="groupDescription"></textarea><br><br>  

    <button id="saveGroup">Save</button> 
    <button id="cancelGroup">Cancel</button> 

    <label id="groupError"></label> 
</div> 

只是一點點的建議是使用一個div，而不是一個標籤，以顯示您groupError的，我現在這是隻用於演示目的所以它只是一個小旁註理解。

我不是100％possitive此解決方案將工作，但是，我認爲導致問題是您正在使用的按鈕的默認行爲。由於腳本完全依靠Ajax調用，我的猜測是，你必須阻止默認的發生這樣：

$('#saveGroup').click(function(e) { 
    e.preventDefault(); 
}); 

你可以給下面一個鏡頭腳本，希望它的作品。由於ajax調用，我無法測試它。

$("#saveGroup").click(function(e){ 
    e.preventDefault(); 
    var formValidation = checkTitle(); 

    // formValidation is only true in case no errors occured 
    // Therefor making your #groupError check useless 
    if(formValidation == true) { 
     // Reset the #groupError html content 
     $('#groupError').html(''); 

     // insert your other jQuery code here 
    } 
}); 

一個的jsfiddle：：但我會在一分鐘內做出的jsfiddle用一些測試數據http://jsfiddle.net/8bJAc/

如你的onblur會檢查這個數據看（請不有，模擬真實的隨機因素/假的你的ajax調用）並提交後，你可以看到成功或錯誤消息。