在 Javascript 中插入文本框值不会通过 ASP.NET 验证答案

【问题标题】：Inserting a textbox value in Javascript doesn't pass ASP.NET validation在 Javascript 中插入文本框值不会通过 ASP.NET 验证
【发布时间】：2014-12-30 17:48:15
【问题描述】：

我有一个 ASP.NET 4.5 Web 表单，其中包含物理地址和邮寄地址的输入。输入实际地址后，如果信息相同，用户可以勾选复选框以填写邮寄地址。

这是通过与复选框绑定的 OnClick 函数发生的，该函数基本上是这样做的（我省略了其他代码）： document.getElementById("<%= txtMailAddressStreetNumber.ClientID%>").value = document.getElementById("<%= txtPermAddressStreetNumber.ClientID%>").value;

每个地址文本框都有一个RequiredFieldValidator。当我提交表单时，它会通过客户端验证并回发到服务器。它失败了（Page.IsValid 是假的）。 OnClick 函数填充的文本框无法通过服务器端验证，除非我手动填充它们。

我尝试在分配值后调用Page_ClientValidate('FormGroup');（FormGroup 是验证组的名称），这样做不会触发文本框的任何验证错误消息。但是，当我提交表单（回发）时，通过 Javascript 插入的值全部被清除，我必须手动输入它们。

.aspx 页面中的代码：

<asp:Label CssClass="mainlabel" ID="lblPermAddressZipCode" runat="server" Text="Zip Code" AssociatedControlID="txtPermAddressZipCode" />
<asp:RequiredFieldValidator ControlToValidate="txtPermAddressZipCode" ID="RequiredFieldValidator10" runat="server" ErrorMessage="*" Display="Dynamic" ValidationGroup="FormGroup" CssClass="formerror" />
<asp:TextBox ID="txtPermAddressZipCode" Width="100" onclick="openDialog(1)" ReadOnly="true" CssClass="readOnlyTextBox" runat="server" />

<asp:CheckBox ID="cbPermIsMailAddress" onclick="UsePermanentAsMailingAddress()" runat="server" /><small>(same as above)</small>

<asp:Label CssClass="mainlabel" ID="lblMailAddressZipCode" runat="server" Text="Zip code" AssociatedControlID="txtMailAddressZipCode" />
<asp:RequiredFieldValidator ControlToValidate="txtMailAddressZipCode" ID="RequiredFieldValidator15" runat="server" ErrorMessage="*" Display="Dynamic" ValidationGroup="FormGroup" CssClass="formerror" />
<asp:TextBox ID="txtMailAddressZipCode" ReadOnly="true" onclick="openDialog(2)" CssClass="readOnlyTextBox" Width="100" runat="server" />

Javascript：

function UsePermanentAsMailingAddress() {
    //only copy if the address is complete

    if (document.getElementById("<%= permCityStateZipId.ClientID %>").value != '') {

        //exit if the box was unchecked
        if (!$("#<%= cbPermIsMailAddress.ClientID%>").is(':checked')) {
            return;
        }

        document.getElementById("<%= txtMailAddressZipCode.ClientID%>").value = document.getElementById("<%= txtPermAddressZipCode.ClientID%>").value;
        //the ID value is the answer
        document.getElementById("<%= mailCityStateZipId.ClientID%>").value = document.getElementById("<%= permCityStateZipId.ClientID %>").value;

        //Page_ClientValidate('FormGroup');
    }
    else {
        $("#<%= cbPermIsMailAddress.ClientID%>").removeAttr('checked');
        alert("Please enter a complete permanent address first.");
    }
}

【问题讨论】：

我们需要查看您的代码。
@prospector 我已经添加了代码。我使用了几个包含 City-State-Zip ID 的隐藏字段。客户端没有对其进行验证。
@prospector 此外，它似乎通过了客户端验证。一旦它到达服务器，它就会失败。页面再次加载，但没有通过 JS 更改值（文本框为空）。该页面有EnableViewState='true'。
@prospector 这个问题几乎肯定与文本框的readonly 状态有关。

标签： javascript jquery asp.net validation webforms

【解决方案1】：

由于在 .aspx 中设置了 ReadOnly 属性，因此在回发时，客户端对其所做的任何更改都将被忽略。如果您绝对需要将文本框设为只读，请从 .aspx 中删除该属性并在页面加载时使用 JavaScript 进行设置：

$(document).ready(function () {
     $('#<%= txtMailAddressZipCode.ClientID%>').prop('readonly', true);
});

这样用户将无法直接更改文本框（我假设您有其他填充文本框的方式），但任何更改都将被发回，而不是原始（空）值。

【讨论】：