@ Html.Textbox验证和onclick =确认不能一起工作

Question

我有一个如下代码：

@using (Html.BeginForm("UpdateEmail", "Default"))
{
    @Html.TextBox("emailAddress", "", new
    {
        @type = "email", 
        @required = "true", 
        @pattern = "[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}"})        
    }
    <input type="submit" value="Submit" onclick="return confirm('Are you sure you wish to proceed?')" />
}

问题是，电子邮件验证消息和“onclick ='return confirm（）'”两者不能一起工作。它是一个或另一个。我该怎么办？

Answer 1

我在我的项目中做了类似的事情，但我只是在JQuery中相应地启用/禁用了提交按钮。

$("#txtEmail").on("blur", function () {
        var email = $(this).val().toString();
        var pattern = "YOUR_PATTERN";

        if (email.match(pattern)) {
            alert("valid");
            //Enable Submit button
        } else {
            alert("invalid");
            //Disable submit button
        }
    });

您当然也可以拦截表单的提交，然后验证那里的内容。将按钮类型更改为“按钮”并捕获单击事件。同时为表单指定名称。使发布更容易选择。

 @using (Html.BeginForm("UpdateEmail", "Default", FormMethod.Post, new { id = "frmMyEmailForm" }))
 {
 }

 $("#btnSubmitForm").on('click', function () {

        var email = $("#txtEmail").val().toString();
        var pattern = "YOUR_PATTERN";

        if (email.match(pattern)) {
            $("#frmMyEmailForm").submit();
        } else {
            alert("invalid");
            //Disable submit button
        }
    });

类似于上面的东西应该达到你所需要的。

谢谢

Answer 2

您可以在jquery onclick中手动调用不显眼的验证

function submitForm(action) {
var $form = $("#myForm");
$form.action = "/Area/MyController/" + action;

$.validator.unobtrusive.parse($form);
$form.validate();

if ($form.valid()) {
  return confirm('Are you sure you wish to proceed?');
}
}