Javascript 代码第二次无法工作

Question

我是 javascript 新手。我有两个文本框

<asp:TextBox id="txtbox1" class="txt" runat="server" />
<asp:TextBox id="txtbox2" class="txt" runat="server" />

我在这里使用 javascript 验证，以便用户无法输入 NULL 值。我的 JavaScript 代码没问题。在按钮上我正在使用此代码。

<asp:Button ID="btn_add" runat="server" OnClientClick="return validate();" OnClick="btn_add_Click" Text="Submit" />

现在的问题是，当用户将文本框留空并单击按钮时，会显示错误消息，在用户更正错误并再次单击按钮后，按钮将不起作用。什么也没发生。

编辑:我的 JavaScript 代码

 <script type="text/javascript">
    function validate()
    {
        var error = 0,value,a,q,i;
        value = document.getElementsByClassName("txt");

        for (i = 0; i < value.length; i++)
        {
            if (value[i].textContent == '')
            {
                document.getElementById("errmsg").innerHTML = "TextBox can't be blank";

                error = 1;
                break;
            }
        }


       if (error == 0)
        { return true }
        else { return false}

    }

</script>`

Answer 1

我被你的错误变量抛出了，我本以为会失败。修复方法非常简单。您正在使用输入，并且 textContent 不是有效属性，因为文本未嵌套在标记内(与 div、p、textarea 等不同)。

输入将其内容包含在属性中，当用户修改输入时，值会发生更改并且有线索。您必须访问输入值。

<script type="text/javascript">
function validate()
{
    var error = 0,value,a,q,i;
    value = document.getElementsByClassName("txt");

    for (i = 0; i < value.length; i++)
    {
        if (value[i].value == '')
        {
            document.getElementById("errmsg").innerHTML = "TextBox can't be blank";

            error = 1;
            break;
        }
    }


   if (error == 0)
    { return true }
    else { return false}

}
</script>`

<form action="form_action.php" method="get">
  <div id="errmsg"></div>
  <div>
    <label>First name</label>
    <input class="txt" type="text" name="fname" value="" />
    <input type="submit" onclick="return validate()" value="Submit" />
  </div>
</form>

如果您要稍微修改一下这段代码，我会选择不使用内联函数分配，并且如其他评论中所述，使用必需标志，然后在 DOMready 上检查表单中的必填字段。

然后你就可以随心所欲的处理它们了，onSubmit，onChange。它将为您提供更多的灵 active 。

ps。你必须告诉我这是做什么的... var error = 1,value,a,q,i