Question

我有html表格：

<form method="POST" action="MyServletName1" enctype="multipart/form-data">
    //Other html code
    <input type="submit" value="Next" onclick="return Check();"/>
</form>

检查功能如下，进行简单验证，检查用户是否在文本字段中输入了id，如果用户在textfield中输入了值，则返回true，提交上述表格：

function Check()
{
    var myID = document.getElementById('myID').value;
    if(myID!=null && myID.length>0)
        return true;
    else
    {
        alert('Please enter ID!');
        return false;
    }
}

以上功能正常。现在我想检查数据库中是否已存在此ID。如果ID存在，那么我不想提交表单。

所以现在Check（）函数看起来像：

function Check()
{
    var myID = document.getElementById('myID').value;
    if(myID!=null && myID.length>0)
    {
        $.post('MyServletName2',{ action: "checkID",myID:myID}).done(function(data) 
        {
            if(data=="OK")
                return true;
            else
            {
                return false;
                alert(data);
            }
        }
    }
    else
    {
        alert('Please enter ID!');
        return false;
    }
}

现在，如果用户输入ID，那么它正在向servlet发送请求，但即使servlet返回OK的其他值，现在也会提交表单。

任何建议都将受到赞赏。

Answer 1

尝试这样的事情

    $.ajax({
        url: 'MyServletName2',
        data : { action: "checkID",myID:myID},
        async: false,
        }).done(function() {
            if(data=="OK"){
                   return true;
            }
               else
               {
                   return false;

               }
        });

默认情况下，所有请求都是异步发送的（默认情况下设置为true）。如果需要同步请求，请将async选项设置为false。

您的表单在您的ajax获得响应之前被提交，因此它不会对其进行验证。

Answer 2

发布是异常的。因此，在异步发布完成之前，您的方法不会返回false。因此，您的表格帖子正常执行。

您可能需要执行其他操作，例如将输入提交更改为按钮。然后你的回调按钮发布表格跳过支票。有点像...

<form method="POST" action="MyServletName1" enctype="multipart/form-data" id="form1">
    //Other html code
    <input type="button" value="Next" onclick="Check();"/>
</form>

注意我更改了按钮，在表单form1中添加了一个id并更改了onlick（删除了返回）。

下一步是处理您的帖子。这是一个简单的改变。

function Check()
{
    var myID = document.getElementById('myID').value;
    if(myID!=null && myID.length>0)
    {
        $.post('MyServletName2',{ action: "checkID",myID:myID}).done(function(data) 
        {
            if(data=="OK")
                document.getElementById('form1').submit();
            else
            {
                alert(data);
            }
        }
    }
    else
    {
        alert('Please enter ID!');
    }
}

请注意，唯一真正的更改是删除return false \ true并添加

document.getElementById('form1').submit();

手动提交表单..现在这只是一个选项，希望这会有所帮助。

Answer 3

function Check()
{
    var myID = document.getElementById('myID').value;
    var valid = false;
    if (myID != null && myID.length > 0)
    {
        $.ajax({
            url: 'MyServletName2',
            data: {action: "checkID", myID: myID},
            async: false,
            success: function() {
                if (data == "OK") {
                    valid =  true;
                }
                else
                {
                   valid = false;
                }
            }
        });
        return valid;
    }
    else
    {
        alert('Please enter ID!');
        return false;
    }
}

使用jquery请求验证无法正常工作

3 个答案: