Question

我试图在验证失败时在登录表单下方显示div id = #valError。以下是代码。

但是，我只能在页面上永久地看到表单，并且id #valError的值出现并消失。我想在验证失败时永久显示它。注意:( #valError div和form id =＃userForm都在#userFormDiv下。）

此外，我在验证成功时删除#userFormDiv并显示json响应数据。

Kinldy帮助我。另外，建议我这是否正确。

$.ajax({
            url : "/RestTest/rest/getJson",
            type : "POST",
            dataType : "json",
            data : inputdata,
            contentType : "application/json",
            cache : false,
            async:false,
            beforeSend : function() {
                $("#userForm").hide();
                $("#loadingImg").show();
            },
            success : function(data) {
                console.log(data);
                if(data.invalidCred) {
                    alert(data.invalidCred);
                    $("#loadingImg").remove();
                    $("#userForm").show();
                    $("#valError").show();
                }else {
                    alert(data.SessionID);
                    $("#userFormDiv").remove();
                    $("#responseDiv").show().append(
                            "<ul><li>" + data.OperatorID
                            + "</li><li>" + data.SessionID
                            + "</li></ul>");
                }
            },

<div id="userFormDiv">

<form id="userForm" method="POST">

<table>

    <tr>

        <td><label for="uname">Username:&nbsp;</label></td>
        <td><input name="uname" id="unameID" type="text" title="" placeholder="username" required autofocus/></td>

    </tr>

    <tr>
        <td><label for="pname">Password:&nbsp;</label></td>
        <td><input name="pname" id="pwdID" type="password" title=""
            placeholder="password" required /></td>
    </tr>
    <tr>
        <td></td>
        <td>
        <button type="submit" id="LoginID">Login</button>
        </td>
    </tr>

</table>



</form>

<img id ="loadingImg" src="images/ajax-loader.gif" alt="Loading..." ></img>
<div id="valError">
<p> Authentication failed. Please try again..</p>
</div>
</div>


<div id="responseDiv"></div>

Answer 1

问题w.r.t你的容器#userFormDiv，我建议把它隐藏在DOM上（$("#userForm").hide();中不需要beforeSend。

你的DOM中的

：

<div id="userFormDiv" style="display:none;"></div>

希望有所帮助

Answer 2

根据你在Jsfiddle的链接，我想想我可以找到你麻烦的来源。

方法.show()和.hide()常见错误。事实上，第一个方法添加了样式声明visibility:visible，第二个方法将visibilty:hidden添加到元素（或IE visibilty:hide）。

样式声明display:block和display:none具有不同的效果。这些方法在运行时添加和删除DOM中的元素。因此，.show()和.hide()的使用不会对此元素产生任何影响。

在您的css声明中，您使用了display:none。你能做什么？尝试以下步骤：

创建一个仅包含display:none的额外css类和另一个包含display:block的css类。然后从#loadingImg {}，#valError {}和#1responseDiv {}中删除其他内容。
移除电话.show()和.hide()并改为使用.removeClass().addClass()，始终在一起。
您宣布您的表单没有任何目标。由于这个事实，你必须在onSubmit函数中添加return false;作为最后一个语句，否则将重新加载相同的页面。

隐藏并显示不按预期工作

2 个答案: