asp.net核心不显眼的表单验证回调，用于远程验证

如何解决asp.net核心不显眼的表单验证回调，用于远程验证

我有2个字段（daaaa; D）电子邮件和密码的登录表单...
密码字段最初是隐藏的，如果电子邮件有效，我需要由远程验证者检查电子邮件并显示密码字段...

[Remote("ValidateAccount","Account",ErrorMessage = "I Couldn’t find any matching account!")]

验证器本身可以工作，并向服务器发出http请求，并验证电子邮件并显示错误消息...

但是我无法检测到此验证何时完成，因此我可以显示密码字段...

我尝试覆盖验证器showErrors函数，但是在完成远程验证器之前，它会以空错误被触发...

我尝试了$( '#form' ).on( "invalid-form.validate",console.log );，但这仅在提交表单时触发。 invalidHandler也是如此...

所以我只能想到2种选择：
1-使用setTimeout检查字段错误消息！！
2-为远程验证器编写我自己的自定义逻辑

那么还有其他选择吗？

解决方法

我认为您也可以使用DOMCharacterDataModified事件来检查错误消息的范围是否已更改。这是一个工作示例，如下所示：

@model Testdata
<form asp-action="Create">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Email" class="control-label"></label>
        <input asp-for="Email" class="form-control" />
        <span asp-validation-for="Email" id="EmailMessage"class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Password" class="control-label"></label>
        <input asp-for="Password" class="form-control" hidden />
        <span asp-validation-for="Password" class="text-danger"></span>
    </div>
    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
</form>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        $('#EmailMessage').on('DOMSubtreeModified',function () {
            var input = $("#Email").hasClass("valid");
            if (input) {
                $("#Password").removeAttr("hidden");
            }
            else {
                $("#Password").attr("hidden","hidden");
            }
    })
    </script>
}

结果：

,

我能够将其与此代码一起使用

  var loginForm = $('#login-form')[0];
    var settings = $.data(loginForm,'validator').settings;
    var oldSucessFunction = settings.success;

    settings.success = function (error,element) {
      //Do something here
      oldSucessFunction(error,element);
      if (emailInput[0] === element) {
        enableButton(nextButton);
      } else if (passwordInput[0] === element) {
        enableButton(submitButton);
      }
    }