禁用提交按钮的 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() 函数的结果。因为if($("#groupError").html() == ""){ 失败的可能性很小，因为仍然检测到一些 HTML。

上面的 cmets 产生了这个 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% 肯定这个解决方案会起作用，但是，我认为导致问题的原因是您正在使用的按钮的默认行为。由于脚本完全依赖于 ajax 调用，我猜你必须防止这样的默认情况发生：

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

您可以试一下下面的脚本，希望它有效。由于 ajax 调用，我无法对其进行测试。但我会在一分钟内用一些测试数据制作一个 jsFiddle：

$("#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：http://jsfiddle.net/8bJAc/

正如您在 onBlur 上看到的，数据已被检查（请不要有一个随机因素来模拟您的 ajax 调用的真/假），提交后您可以看到成功或错误消息。