Question

我做了某种形式验证。用户可以输入组名和组说明。使用jQuery我正在验证组名是否为空，如果应禁用空提交按钮。现在我遇到了禁用提交按钮的问题。如果我点击组名称所在的输入标签，那么验证就可以了，并且提交按钮被禁用，但是如果我只是单击提交按钮而不触及任何其他内容，那么jQuery跳过验证并触发提交按钮，尽管组名称为空。我尝试使用jQuery设置焦点的输入标签，但只有在我实际点击该输入标签时它才有效。

提交按钮是'saveGroup'按钮。

有人可以告诉我如何在此输入标记上调用click事件，或者我可以使用其他一些验证技术。

    <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

你最好改变你在这里做事的方式。首先，正如我所说，确保你执行“isEmpty”检查而不执行任何ajax调用。 Javascript完全有能力这样做。

其次，不是检查元素中的HTML，而是检查checkTitle（）函数的结果。因为if($("#groupError").html() == ""){可能会失败，因为仍然会检测到一些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％可能这个解决方案可行，但是，我认为导致问题的是您正在使用的按钮的默认行为。由于脚本完全依赖于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：http://jsfiddle.net/8bJAc/

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

禁用提交按钮的jQuery验证

1 个答案: