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

如何确保在提交表单时运行验证脚本?如果手动调用$form.validate()$form.valid(),它也需要运行.

我在谷歌上四处搜索,发现了一些例子.但它们看起来很老,而且使用网络表单等技术.

有没有人能给我一些建议,或者让我参考有关这个问题的详细资料?

注意:我的验证将判断是否为一组输入元素中的至少一个元素提供了值.因此,如果可能的话,我只希望运行我的新验证,并且不与任何一个输入相关联.

UPDATE

根据我在网上找到的信息,我得出了以下结论.

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

但我try 了一些变化,但没有一个导致这个验证器被运行.

推荐答案

您希望您的自定义验证在ASP.NET Core Razor Pages版应用程序的现有基础设施中工作,并专门处理内置批注不够的情况.

You would need to make sure the custom validation integrates seamlessly with jQuery Validation and jQuery Unobtrusive Validation used by ASP.NET Core.
The idea is to add custom methods to the jQuery Validator object and integrating them with the unobtrusive validation framework, which is a practical application of extending the client-side validation capabilities discussed in the documentation "Model validation in ASP.NET Core MVC and Razor Pages".

您已经使用$.validator.addMethod(Custom client-side validation)开始了这项操作.但由于它需要作为现有验证基础 struct 的一部分运行,因此您必须将此自定义验证绑定到表单元素或根据需要手动触发它.

为了确保在提交表单以及调用$form.validate()$form.valid()时都运行自定义验证,您可以将其绑定到表单的submit事件,并在必要时手动触发它作为这些方法的一部分.由于您提到您的验证不与任何一个输入相关联,因此您可能需要手动触发此验证,或者确保将其作为表单整体验证过程的一部分进行判断.

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

与您的原始脚本相比,这个脚本定义了如何 Select 应该一起验证的输入组.它使用 Select 符(在本例中为.input-group-class)来指定哪些输入是验证规则的一部分.这应该说明如何将多个输入作为单个验证规则的目标,这在您的场景中很重要(判断是否提供了一组输入中的至少一个).

该代码包括一个可选步骤,用于将自定义验证绑定到表单的提交事件.这样,自定义验证逻辑被认为是before表单被提交,如果验证失败则阻止提交.这是确保自定义验证与内置验证一起执行的一种直接方法.

您没有显式地展示如何触发或确保该验证与内置方法一起判断.新代码显示了定制验证的集成,因此它也可以与对$form.validate()$form.valid()的手动调用一起工作.


Neither my jQuery.validator.addMethod nor jQuery.validator.unobtrusive.adapters.add code is getting called.
Currently, I'm validating my code by calling validate() and valid(), but I want it to also work if the form is submitted by user action. I just want my code to run when the regular validation runs.

我暂时把options.rules['validGroups']改成了.input.(我的最终代码将太复杂,无法使用类.我将需要从C#生成一个定制脚本.)我可能只需要手动调用我的代码.

确保您的页面中正确引用了jQuery验证和jQuery非显式验证脚本.必须加载这些脚本,自定义验证才能与ASP.NET核心验证生命周期集成.

如果没有调用$.validator.addMethodjQuery.validator.unobtrusive.adapters.add方法,请验证这些脚本是否放置在确保它们可以在加载jQuery和验证脚本之后运行的位置.通常将它们放在页面底部的脚本标记中或$(document).ready()函数中,以确保首先加载所有依赖项(如in this answer).

由于您的自定义验证逻辑必须作为表单的标准验证过程的一部分运行,因此请确保您没有无意中绕过框架的验证机制.如果在没有看到自定义验证逻辑运行的情况下手动调用validate()valid(),则可能存在相对于自定义验证设置调用这些方法的方式或时间的问题.

如果您的验证逻辑很复杂并且是从C#动态生成的,那么您可以 Select 将这些规则作为Razor视图的一部分直接注入到您的页面中.这可以通过呈现包含定制验证逻辑和规则的脚本块来实现,这些逻辑和规则是根据所呈现的表单的特定需求而定制的.

要确保您的自定义验证逻辑与标准验证过程一起执行,请考虑将此逻辑作为表单的submit事件的一部分显式调用.这可以通过将事件侦听器附加到表单的提交事件来实现,该事件侦听器首先运行您的自定义验证逻辑,并且只有在自定义验证通过时才继续提交.

$(document).ready(function() {
    var $form = $("#yourFormId"); // Replace with your form's ID
    $form.on('submit', function(e) {
        if (!customValidationLogic()) { // Replace `customValidationLogic` with your method
            e.preventDefault(); // Prevent form submission
            // Optionally, display an error message or highlight invalid fields
        }
    });

    function customValidationLogic() {
        // Implement your custom validation logic here
        // Return `true` if validation passes, `false` otherwise
    }
});

如果您要手动触发验证判断,请确保它们是对不显眼的验证过程的补充,而不是与其冲突.这可能涉及手动添加或删除错误消息,其方式与不显眼的验证显示其消息的方式一致.

Jquery相关问答推荐

:eq Jquery,我似乎无法显示第一个之后的元素

Jquery 表数据无法在 html 上正确显示

我正在try 使用 Jquery 打开与帖子相关的特定 comments

JQuery - 从先前 Select 的下拉列表中隐藏/显示选项

使用 jQuery / javascript 测试链接是否是外部的?

如何使用jQuery删除父元素

Jquery .on('scroll')在滚动时不触发事件

jQuery Select 一个具有某个类的div,它没有另一个类

jQuery切换文本?

在 HTML 表单提交上制作 Enter 键而不是激活按钮

字符串化(转换为 JSON)具有循环引用的 JavaScript 对象

Select 除第一个之外的所有子元素

在jQuery中添加ID?

是否可以在 beforeunload 弹出窗口中显示自定义消息?

jQuery:如果页面底部有外部 JS,为什么要使用 document.ready?

虽然未定义变量 - 等待

如何从所有元素jquery中删除类

使用 Jquery 查找父 div 的 id

如何防止使用光标拖动 Select 文本/元素

获取对象属性中的最小值/最大值的快速方法