0

我有一个冻结面板，当用户提交表单时会弹出一个阻止他们点击页面中任何其他控件的表单。这与从我的 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>
4

2 回答 2

0

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

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

于 2013-09-22T08:54:35.787 回答
0

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

    $('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();
    });
于 2013-09-25T00:44:25.747 回答