禁用提交按钮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调用）并提交后，你可以看到成功或错误消息。