提交表单时运行自定义验证脚本

Question

我有一个 ASP.NET Core Razor Pages 应用程序，其中的页面需要一些自定义验证。我希望使用自定义 JavaScript 在客户端上运行此验证。

如何确保提交表单时验证脚本运行？如果手动调用

$form.validate()

和

$form.valid()

，它也需要运行。

谷歌搜索，我发现了一些例子。但他们看起来很古老，并且使用 WebForms 等技术。

有人可以提供一些建议或向我推荐详细介绍此问题的资源吗？

注意：我的验证将检查是否为一组输入元素中的至少一个提供了值。因此，如果可能的话，我只希望运行新的验证而不与任何一个输入关联。

更新

根据我在网上找到的信息，我得出以下结论。

$.validator.addMethod("validGroups", function (value, element, params) {
    alert('Test');
    return false;
}, 'Error Message');

jQuery.validator.unobtrusive.adapters.add('validGroups', function (options) {
    options.rules['validGroups'] = {};
    options.messages['validGroups'] = options.message;
});

但是我对此尝试了多种变体，但没有一个导致该验证器运行。

Answer 1

您希望自定义验证能够在 ASP.NET Core Razor Pages 应用程序的现有基础架构中工作，并专门处理内置注释不够的情况。

您需要确保自定义验证与 ASP.NET Core 使用的 jQuery Validation 和 jQuery Unobtrusive Validation 无缝集成。
这个想法是向 jQuery Validator 对象添加自定义方法，并将它们与不显眼的验证框架集成，这是扩展文档“ASP.NET Core MVC 和 Razor 中的模型验证”中讨论的客户端验证功能的实际应用页数”。

您已经使用

$.validator.addMethod

（自定义客户端验证）开始了此操作。但由于它需要作为现有验证基础设施的一部分运行，因此您必须将此自定义验证绑定到表单元素或根据需要手动触发它。

为了确保您的自定义验证在提交表单时以及调用

$form.validate()

和

$form.valid()

时运行，您可以将其绑定到表单的提交事件，并在必要时作为这些方法的一部分手动触发它。由于您提到您的验证不与任何一个输入关联，因此您可能需要手动触发此验证或确保将其作为表单整体验证过程的一部分进行检查。

$(function() {
    // Define the custom validation method
    $.validator.addMethod("validGroups", function(value, element, params) {
        // Your custom validation logic here.
        // Return true if validation passes, false otherwise.
        // For example, check if at least one input in a group has a value
        var isValid = false;
        $(params).each(function() {
            if (this.value) {
                isValid = true;
                return false; // break out of loop
            }
        });
        return isValid;
    }, 'At least one field must be filled.');

    // Add the custom method to the validator
    jQuery.validator.unobtrusive.adapters.add('validGroups', function(options) {
        options.rules['validGroups'] = '.input-group-class'; // Use a selector that matches your group of inputs
        options.messages['validGroups'] = options.message;
    });

    // Make sure the form uses validation
    var $form = $("#yourFormId"); // Replace with your form's ID
    $form.validate({
        // Additional validation options if needed
    });

    // Optional: Bind to form submit to make sure custom validation is considered
    $form.on("submit", function(event) {
        if (!$form.valid()) {
            event.preventDefault(); // Prevent form submission if validation fails
        }
    });
});

与原始脚本相比，这个脚本确实定义了如何选择应一起验证的一组输入。它使用选择器（示例中的

.input-group-class

）来指定哪些输入是验证规则的一部分。这应该阐明如何针对单个验证规则定位多个输入，这在您的场景中很重要（检查是否提供了一组输入中的至少一个）。

代码包含一个可选步骤，用于将自定义验证绑定到表单的提交事件。这样，自定义验证逻辑就会在提交表单之前被考虑，从而在验证失败时阻止提交。这是确保自定义验证与内置验证一起强制执行的直接方法。 您没有明确展示如何触发或确保与内置方法一起检查此验证。新代码显示了自定义验证的集成，以便它也可以与手动调用

$form.validate()

和

$form.valid()

配合使用。