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

trigger unobtrusive validation but prevent submit on mvc4 form

本文关键字：MVC4 表单 提交 不显眼 验证      更新时间：2023-09-26

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

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

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

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

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

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

或者，您可以挂接到提交事件并自己执行：

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

将提交按钮更改为按钮类型。验证将调用，但提交不会

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

我通过破解jQuery Validing默认选项解决了它。 jQuery Validate 在后台通过不显眼的验证使用。

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

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

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

就我而言，有许多具有不同需求的表单，我使用了这样的东西：

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);
}

我让每个submitHandler只处理它必须处理的表格的责任。提交处理程序应检查表单，如果它不是它应该处理的表单，则无需执行任何其他操作即可return true;。因此，添加对意外表单执行操作的不良submitHandler会弄乱其他表单或整个页面。

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

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

相关文章：