使用 jQuery 在客户端上验证失败后删除冻结面板

Removing a freeze panel after validation fails on the client using jQuery

本文关键字：删除 冻结 失败 验证 jQuery 客户端 使用      更新时间：2023-09-26

>我有一个冻结面板，当用户提交表单时会弹出该面板，阻止他们单击页面中的任何其他控件。这与从我的 MVC 服务控制器上设置的属性验证表单控件一起工作正常。

问题是当用户输入的电子邮件地址在帐户名和@符号之间有一个空格 - someName @email.com 时。我收到一个小的白色弹出框，验证指向电子邮件文本框的错误消息。我猜它来自jQuery，因为创建控制器方法永远不会触发。最大的问题是冻结面板保持不变，因此在刷新页面之前无法更正问题。

在jQuery方面，我是一个新手，不知道如何纠正这个问题。我猜我需要确定 jQuery 何时为不正确的电子邮件地址触发了验证异常，以便我可以将冻结窗格的 css 属性更改回隐藏状态。

任何帮助都将大大例外！

在我的模型类中，我有电子邮件的此属性。

    [Required(ErrorMessage = "Email required")]
    [StringLength(125), EmailAddress(), Display(Name = "Email Address")]
    public string Email { get; set; }

在我的控制器中，我有这个简单的创建方法。

    [HttpPost]
    public ActionResult Create(ClientService clientservice)
    {
        if (ModelState.IsValid)
        {
            context.ClientServices.Add(clientservice);
            context.SaveChanges();
            return RedirectToAction("Completed");
        }         
            return View("Create");
    }

我的创建视图 我有这段代码，它加载了一个包含输入控件以及冻结窗格div 和控制面板的 jQuery 脚本的部分视图。

   @using (Html.BeginForm()) {
   @Html.ValidationSummary(true)
   <fieldset class="user-input">
       <legend>Client Service</legend>
       <h2 class="margin-indent">How to contact -</h2><br />
    @Html.Partial("_CreateOrEdit", Model)
       <p class="margin-indent">
        <input id="pageSubmit" type="submit" value="Submit" />
    </p>
   </fieldset>
   }
   <div id="FreezePane" class="FreezePaneOff">
   <div id="InnerFreezePane" class="InnerFreezePane"> </div>
</div>
<script type="text/javascript">
$(function () {
    $('#pageSubmit').click(function (event) {
    var itemErrors = validator.numberOfInvalids();
    if (itemErrors >= 1) {
        event.preventDefault();
    } else {
        $('html,body').scrollTop(10);
        $('#FreezePane').toggleClass('FreezePaneOn');
        $('#InnerFreezePane').text("Processing...");
    }
});
</script>

你应该做的是 - 只有在所有验证通过并提交表单后初始化冻结窗格。这样，如果出现验证错误，用户仍然可以编辑该字段并再次单击提交。

如果电子邮件验证是在 JS 客户端上完成的，这将起作用。如果您不确定..尝试查找验证弹出窗口的来源。你可以给我更多细节，让我弄清楚。.就像整个用例的小提琴手痕迹等一样。

经过更多的搜索，我遇到了这段代码，它完全符合我的需要。它捕获提交，并附加处理程序以防止在验证表单后对按钮执行默认操作。 

    $('form').one('submit', function (evt) {
        //unhide the freeze panel after validating form
        $('html,body').scrollTop(10);
        $('#FreezePane').toggleClass('FreezePaneOn');
        $('#InnerFreezePane').text("Processing...");
        /**
         * disable default action (this handler will be attached after first 
         * submit event and it will prevent any further submit action
         */
        $(this).on('submit', function (evt) {
            evt.preventDefault();
    });
相关文章：