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

Posted 2023-04-13

【中文标题】ASP.NET Web 窗体 - 通过 jquery 填充字段时客户端验证不起作用？

【英文标题】：ASP.NET Web Forms - Client side validation not working when field populated via jquery?

【发布时间】：2017-03-21 19:28:10

【问题描述】：

我有以下 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").next('label').remove();

@Shree 我为什么要删除标签？ asp.net webforms 生成的标记是：<span id="RequiredFieldValidator5" class="field-validation-error" style="display:inline;">Address is Required</span>。另外，如果我有十几个以这种方式预填充的字段，那么这不是解决此问题的干净方法。

【参考方案1】：

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

要让它工作，您有两个选择，要么手动触发change 事件：

方案一：jQuery 解决方案触发 change 事件

$("#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 更改破坏。希望对您有所帮助。

【参考方案2】：

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

试试这个，它会起作用的