javascript - ASP.NET 当表单 onsubmit 调用时 DOM 元素消失

Question

我有简单的 Html.BeginForm 和一些数据，我想在用户单击“提交”按钮时使用 onsubmit() javascript 函数检查一些条件，然后再发送表单。当这个条件为假时，我想停止重新加载页面，只是不要将我的表单发送到 POST 方法。这工作正常，但我遇到了一个问题，因为我在 onsubmit() 方法中创建的 DOM 元素消失了:

 @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form", **onsubmit=" return registerValidation()"**}))
    {
        @Html.AntiForgeryToken()

     @Html.TextBoxFor(m => m.Email, new { @class = "form-control", @id = "emailVal"})
     @Html.ValidationMessageFor(m => m.Email,"", new { @class = "validation-error-white", @id="emailValidation"})

     <input type="submit" class="btn btn-warning btn-block add-item-button-text" value="Zarejestruj" />

    }


<script type="text/javascript">

   function registerValidation() {

            var validForm = validateRegisterForm(email, login);
            if (!validForm) {
                $('#emailValidation').append('Those email already exists! Take another one');
                return false;
            }
            return true;
        }
  </script>

因此，当我想返回 false 并且不发送表单时，我附加到验证 div 的说明错误的文本消失了 - 这不是我想要实现的目标，因为它的时间非常短，用户甚至无法请注意!

Answer 1

您手动触发按钮单击事件。确保类型为按钮。

您不需要**onsubmit="return registerValidation()"**

<input id="btnSubmit" type="button" ... />

<script type="text/javascript">

    $(function () {

        // Trigger btnSubmit button's click event, when enter key is pressed.
        // If you do not want that feature, you can ignore this. 
        $("form").keydown(function (event) {
            if (event.keyCode === 13) {
                $("#btnSubmit").click();
                return false;
            }
        });

        $("#btnSubmit").click(function () {
            // Do something, then submit the form
            $("form").submit();
        });
    });
</script>