触发不显眼的验证但阻止在 mvc4 表单上提交

Question

我有一个表单，这个表单有一些必需的值，所以在我的视图模型中我有一些东西，比如：

[Required(ErrorMessageResourceType = typeof(Res_Errors), ErrorMessageResourceName = "errorPacienteNoSeleccionado")]
public int? scheduledIdPersonaSeleccionada { get; set; }

以及提交按钮，但我不想将表单提交到服务器，如果我的验证通过，我只需要执行 jquery function。

验证工作正常，但我不知道如何阻止表单发布，而是调用我的 function。

Answer 1

如果您只想在表单提交上执行javascript（而不是实际发送信息），请查看@Ajax.BeginForm ：

@using (Ajax.BeginForm(new AjaxOptions { OnBegin = "MyFunction" }))
{
    @Html.EditorFor(x => x.scheduledIdPersonaSeleccionado)
    <input type="submit" value="Presentar" />
}

另外，您也可以连接到Submit事件并自己执行：

$('form').submit(function(){
  if ($(this).valid()) { // validation passed
    // cal your jquery function here
  }
});

Answer 2

将您的提交按钮更改为按钮类型。 将会进行验证，但不会提交

<form>
    @Html.EditorFor(x => x.scheduledIdPersonaSeleccionado)
    @Html.ValidationMessageFor(x=>x.scheduledIdPersonaSeleccionado)
    <input type="button" value="Presentar" onclick="DoSomething();" />
</form>

Answer 3

我通过破解jQuery Validate default options解决了这个问题。 jQuery Validate 是通过非侵入式验证在后台使用的。

如果您只有一个表单要在页面上验证，您可以全局定义一个提交处理程序，该处理程序仅在提交有效表单时执行：

$.validator.setDefaults({
    submitHandler: function (form, e) {
        // your code
    }
});

它必须在不显眼的初始化之前定义，这发生在ready上。 或者您将不得不使用$.validator.unobtrusive.parse(selectorOfYourForm)重新解析表单。

在我的例子中，有许多 forms 有不同的需求，我使用了这样的东西：

let submitHandlers = [];

$.validator.setDefaults({
    submitHandler: function (form, e) {
        let result = true;
        $.each(submitHandlers, function (i, submitHandler) {
            result = submitHandler(form, e) && result;
        });
        return result;
    }
});

function addUnobstrusiveValidationSubmitHandler(submitHandler) {
    if (typeof submitHandler !== 'function') {
        throw 'submitHandler must be a function';
    }
    submitHandlers.push(submitHandler);
}

我将只处理它必须处理的 forms 的责任留给每个submitHandler 。 提交处理程序应该检查表单，然后return true; 如果它不是它应该处理的形式，则不做任何其他事情。 所以添加一个错误的submitHandler作用于意外的 forms 会弄乱其他 forms 或整个页面。

如果我们可以在parse调用中定义submitHandler会更好，但目前此调用不采用options object。

（还有一些选项可以通过将 object 分配给$validator.unobtrusive.options来全局定义，但除了errorClass和errorElement选项之外，我没有找到太多关于此的文档，而且它似乎没有指定一个选项submitHandler 。据我从源代码中看到的，我们只能定义以下附加选项，匹配jQuery 验证选项： errorPlacement 、 invalidHandler和success 。）