javascript - ASP.NET Web 表单 - 通过 jquery 填充字段时客户端验证不起作用？

Question

我有以下 ASP.Net WebForm，其中 Address 字段是必填字段。 Address 字段通过 jQuery 使用 Location 字段的值填充。

当我单击提交而不填写任何字段时，客户端验证将触发，并且我们会在 Address 控件下方显示错误消息。

如果我现在在 Location 字段中输入一个值，则 jQuery 会触发，并且 Address 字段会填充一个值，但之前的错误消息不会清除 -仅当我手动输入值时才会清除？

<div>
    <label>Location</label>
    <asp:TextBox ID="Location" runat="server" CssClass="form-control" ClientIDMode="Static" placeholder="Enter location"></asp:TextBox>
</div>
<div>
    <label >Address</label>
    <asp:TextBox ID="Address" runat="server" CssClass="form-control" ClientIDMode="Static" placeholder="Enter the address"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="Address is Required" Display="Dynamic" ControlToValidate="Address" CssClass="field-validation-error" EnableClientScript="True"></asp:RequiredFieldValidator>
</div>
<asp:Button ID="Submit" runat="server" Text="Save" OnClick="btnSubmit_Click" CssClass="btn btn-primary" />  

<script>
    $("#Location").on('change', function (e) {
        var location =  $("#Location").val();
        $("#Address").val(location);
    });
</script>

如何修复此问题，以便在控件下方显示客户端错误时，如果验证逻辑通过 jquery 完成，如上例所示，它会清除错误消息？

Answer 1

当您在Address 输入中手动输入值时，当输入失去焦点或按 Enter 键时，change 事件将被触发。使用 jQuery val() 方法时不会发生这种情况。

要使其正常工作，您有两种选择，要么手动触发 change 事件:

选项 1:触发更改事件的 jQuery 解决方案

$("#Location").on('change', function (e) {
    var location =  $("#Location").val();
    $("#Address").val(location).trigger("change");
});

或者您也可以直接手动调用 Webforms 验证方法。这有点冒险，因为不能保证这些方法将来不会改变，但为了完整性我将其包含在内，因为它在某些情况下可能很有用。

选项 2:调用 Webforms 验证方法来触发重新验证

$("#Location").on('change', function (e) {
    var location =  $("#Location").val();
    $("#Address").val(location);
    if (typeof (Page_ClientValidate) == 'function') {
        Page_ClientValidate();
    }
});

我在这里选择了 Page_ClientValidate 方法，它将重新验证给定验证组的所有验证器(此处未提供验证组，因为它不适用)。这是更简单、更安全的调用方法之一，在更复杂的情况下，您可能需要 ValidatorValidate() 或 WebUIValidation.js 中的其他方法之一。很高兴对此进行扩展，但我认为这超出了问题的范围。

我更喜欢选项 1，因为它更简单，并且不太容易在未来因 Webforms 更改而被破坏。希望有帮助。