Question

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

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

对于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>

Answer 1

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

如果在JS客户端上进行电子邮件验证，这将有效。如果你不确定...尝试找到验证的来源弹出。你可以给我一些更详细的信息，比如整个用例的小提琴等。

Answer 2

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

    $('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();
    });

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

2 个答案: