ASP.NET Web窗体-通过jquery填充字段时客户端验证不起作用

ASP.NET Web Forms - Client side validation not working when field populated via jquery?

本文关键字：字段 客户端 验证 不起作用 填充 jquery NET Web 窗体 -通过 ASP      更新时间：2023-09-26

我有以下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填充完毕，它就会清除错误消息，就像上面的例子一样？

在Address输入中手动输入值时，当输入失去焦点或按下回车键时，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的更改所破坏。希望能有所帮助。

 $("#Location").on('change', function (e) {
        var location =  $("#Location").val();
        $("#Address").val(location);
$("#Form id").data('validator').resetForm();
    });

试试这个，它会工作

相关文章：