带有 jQuery 验证的 RequireJS - 设置默认设置答案

【问题标题】：RequireJS with jQuery Validation - Set the Default Settings带有 jQuery 验证的 RequireJS - 设置默认设置
【发布时间】：2013-06-14 12:46:34
【问题描述】：

我已经设法让 jQuery 验证插件与 RequireJs 一起使用。我现在正在尝试设置 jquery 验证默认参数，以便它不会验证包装在具有 data-prefix 属性的标记中的字段（这是在 Page1.js 文件中完成的）。但是，当您单击提交按钮时，它会尝试验证这两个字段。

这是代码（原始问题链接到更复杂的演示）：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="utf-8" />
    <script src="http://ajax.cdnjs.com/ajax/libs/require.js/2.1.5/require.js"></script>
    <script>
        require.config({
            paths: {
                'jquery': 'http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3',
                'jquery.validate': 'http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate',
                'jquery.validate.unobtrusive': 'http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive'
            },
            shim: {
                'jquery.validate': ['jquery'],
                'jquery.validate.unobtrusive': ['jquery', 'jquery.validate']
            }
        });

        require(['jquery', 'jquery.validate', 'jquery.validate.unobtrusive'], function($) {
            $.validator.setDefaults({
                ignore: '[data-js-val-prefix] *'
            });
        });
    </script>
</head>
<body>
    <form>
        <div class="validation-summary-valid" data-valmsg-summary="true"><span>Please correct the errors and try again.</span>
            <ul><li style="display:none"></li></ul>
        </div>
        <fieldset>
            <legend>Include</legend>
            <input name="Include" type="text" required />
        </fieldset>
        <fieldset data-js-val-prefix="Exclude">
            <legend>Exclude</legend>
            <input name="Exclude" type="text" required />
        </fieldset>
        <p><button type="submit">Submit</button></p>
    </form>
</body>
</html>

我没有使用库的缩小版本，因为它在调试时可能会有所帮助。

非常感谢您的帮助。谢谢

编辑：

如果您将脚本块更改为以下任何一种，它都可以正常工作。

没有RequireJs：

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
<script>
    $.validator.setDefaults({
        ignore: '[data-js-val-prefix] *'
    });
</script>

没有不显眼的 JavaScript：

<script>
    require.config({
        paths: {
            'jquery': 'http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3',
            'jquery.validate': 'http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate'
        },
        shim: {
            'jquery.validate': ['jquery']
        }
    });

    require(['jquery', 'jquery.validate'], function($) {
        $.validator.setDefaults({
            ignore: '[data-js-val-prefix] *'
        });

        $(function() {
            $('form').validate();
        });
    });
</script>

这向我表明，不显眼的验证库和 RequireJs 一起存在问题。我确定我做错了什么。

【问题讨论】：

请在您的问题中包含代码。否则，在解决了这个问题并且你的演示消失后，这对未来的读者来说毫无用处。
删除演示后，我将修改问题。我开始写它，但它变得有点难看，并认为它可能会分散任何希望提供帮助的人的注意力。
那么您的.validate() 代码在哪里？我真的认为最好在问题中显示简洁示例的代码。
我已经用代码修改了问题。我使用不显眼的验证库（由 Microsoft 提供），它会自动为您连接验证。如果您需要其他任何东西，请告诉我。谢谢
只是一个小的跟进。我删除了不显眼的验证内容并手动将其连接起来，它可以正常工作，所以看起来不显眼的验证正在进行中有些奇怪。

标签： jquery jquery-validate requirejs unobtrusive-validation

【解决方案1】：

我在@Sparky 的帮助下回答了我自己的问题。问题的发生是因为 jquery.validate.unobtrusive 文件连接了 validate 方法，如果你在回调函数中说 $.validator.setDefaults ，它已经连接了验证，它将被忽略。如果将 require 脚本块更改为以下内容：

require(['jquery', 'jquery.validate'], function($) {
    $.validator.setDefaults({
        ignore: '[data-js-val-prefix] *'
    });

    require(['jquery.validate.unobtrusive']);
});

一切都是花花公子。我希望这会有所帮助。

【讨论】：