隐藏 asp.net 生成的 <span> 会破坏我的 javascript 表单验证

Question

所以我使用 javascript 来验证地址字段只是为了将邮政编码从末尾拉出。

我有两个 asp:Labels 我显示和隐藏以通知用户。它工作得很好，标签在需要时显示，验证按我想要的方式工作，当我试图隐藏它们时问题就出现了。其中一个标签显示和隐藏得很好，但每当我尝试隐藏另一个标签时，脚本就会中断

<script>
        function isvalid() 
        {
            var zip = MainContent_tbx_Appt_Address.value.slice(-5);
            if (zip == "") {
                MainContent_lbl_Add_validate2.hidden = true;
                MainContent_lbl_Add_Validate.hidden = false;

            }
            else if (!zip.match('[0-9]{5}')) {
                //MainContent_lbl_Add_validate.hidden = true;
                MainContent_lbl_Add_validate2.hidden = false;

            }
            else
            {
                //MainContent_lbl_Add_validate.hidden = true;
                MainContent_lbl_Add_validate2.hidden = true;

            }

        }
    </script>

            <asp:Label ID="lbl_Add_Validate" style="z-index:100;" Name="lbl_Add_Validate" DataPoint="dp_Add_Validate" runat="server" hidden="true" Text="Address is required"></asp:Label> 

            <asp:Label ID="lbl_Add_validate2" style="z-index:100;" Name="lbl_Add_Validate2" DataPoint="dp_Add_Validate2" runat="server" hidden="true" Text="Invalid address format"></asp:Label>
            <br />
            <asp:TextBox ID="tbx_Appt_Address" onblur="isvalid()" style="z-index:100;" Name="tbx_Appt_Address" DataPoint="dp_Appt_Address" runat="server" Rows="4" TextMode="MultiLine"  Height="65px"  Width="200px" value="Address" onFocus="if (this.value == this.defaultValue) { this.value = ''; }" placeholder="Address">Address</asp:TextBox>

这是我在我的 asp 文件中的代码，当它到达客户端时它会吐出这个

<span id="MainContent_lbl_Add_Validate" name="lbl_Add_Validate" datapoint="dp_Add_Validate" hidden="true" style="z-index:100;">Address is required</span>
<span id="MainContent_lbl_Add_validate2" name="lbl_Add_Validate2" datapoint="dp_Add_Validate2" hidden="true" style="z-index:100;">Invalid address format</span>
<br/>
<textarea name="ctl00$MainContent$tbx_Appt_Address" rows="4" cols="20" id="MainContent_tbx_Appt_Address" datapoint="dp_Appt_Address" value="Address" onfocus="if (this.value == this.defaultValue) { this.value = ''; }" placeholder="Address" onblur="return isvalid()" style="height:65px;width:200px;z-index:100;">Address</textarea>

只要我有 MainContent_lbl_Add_validate.hidden = true;注释掉了，但是如果我让它们运行它会中断

Answer 1

在aspx页面中如果不使用jQuery，尝试使用document.getElementById('MainContent_tbx_Appt_Address')获取元素，如果使用microsoft ajax框架可以使用$get('MainContent_lbl_Add_validate')，这些是对的在 DOM 上引用元素的方法。

编辑：好的，更准确地查看您的代码我发现您在跨度 ID 上犯了一个错误，特别是在“V”字符处。检查 ids 的大小写，你的脚本就会运行。

Answer 2

如果您隐藏具有“runat=server”的元素，您可能会认为 ASP 将呈现控件样式以使其不可见——这意味着您以后可以使用 Javascript 取消隐藏它。这不是它的工作方式。如果设置 hidden=true，则根本不会渲染元素。您的 Javascript 对缺失元素的引用感到作呕并停止执行，因此您的验证器代码永远没有机会运行。

要渲染隐藏元素，请像这样标记它：

<asp:Label ID="lbl_Add_Validate" style="z-index:100;" Name="lbl_Add_Validate" DataPoint="dp_Add_Validate" runat="server" style="visibility: hidden" Text="Address is required"></asp:Label> 

Answer 3

我个人会让 JQuery 处理这个，你可以在 .aspx 中完成：

$(function () {
  $('#tbx_Appt_Address').blur(function(){
    var text_input = $('tbx_Appt_Address').val();

    //additional logic with conditions

    if (text_input=='') 
    {
        $('lbl_Add_Validate').show();
    }

    //etc etc
  });

});