Javascript 使用requirejs加载jquery验证

我正在与你斗争。我定义了以下jquery验证自定义加载项模块：

验证插件.js

define(['jquery', 'jquery.validate', 'jquery.validate.unobtrusive'], 

function ($) {

    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        }
    });

    ....
});

require.config({
    baseUrl: '/Scripts',
    paths: {
        'jquery': 'lib/jquery-2.0.3',
        'jquery.validate': 'lib/jquery.validate',
        'jquery.validate.unobtrusive': 'lib/jquery.validate.unobtrusive',
    },
    shim: {
        'jquery.validate': {
            deps: ['jquery']
        },
        'jquery.validate.unobtrusive': {
            deps: ['jquery.validate']
        }
    }
});

我的requirejs配置文件：

config.js

define(['jquery', 'jquery.validate', 'jquery.validate.unobtrusive'], 

function ($) {

    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        }
    });

    ....
});

require.config({
    baseUrl: '/Scripts',
    paths: {
        'jquery': 'lib/jquery-2.0.3',
        'jquery.validate': 'lib/jquery.validate',
        'jquery.validate.unobtrusive': 'lib/jquery.validate.unobtrusive',
    },
    shim: {
        'jquery.validate': {
            deps: ['jquery']
        },
        'jquery.validate.unobtrusive': {
            deps: ['jquery.validate']
        }
    }
});

我在mvc用户注册视图中使用这些模块，如下所示：

register.cshtml

require(['/Scripts/modules/config.js'], function () {
    require(['modules/user-register', 'modules/validation-addon'], 

     function (userregistration) {
        //using user registration module here..
    }

  );
});

我面临的问题有点奇怪。当我第一次进入user registration view并在use input fields中输入错误值时，我在jquery validator上重写的自定义高亮显示和取消高亮显示函数没有执行，但如果我重新加载register view本身，它会突然开始执行

---

我的感觉是，这可能是因为模块的加载顺序，但我不知道如何解决这个问题，有人能帮我解决这个问题吗？

这看起来像是一个时间问题。在执行重新加载时，这些问题有时很明显，因为初始化的顺序取决于缓存中的内容等

现在有可能

jquery.validate.unobtrusive

在执行调用

$.validator.setDefaults

的代码之前在DOM上执行其工作。要检查在

jquery.validate.unobtrusive

之前是否执行

$.validator.setDefaults

，请从

validation addon.js

中删除

jquery.validate.unobtrusive

要求，并将其添加到主文件中

将

validation addon.js

更改为：

define(['jquery', 'jquery.validate'], 

function ($) {

    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        }
    });

    ....
});

require(['/Scripts/modules/config.js'], function () {
    require(['modules/user-register', 'modules/validation-addon', 'jquery.validate.unobtrusive'], 

     function (userregistration) {
        //using user registration module here..
    }

  );
});

并将

register.cshtml

更改为：

define(['jquery', 'jquery.validate'], 

function ($) {

    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        }
    });

    ....
});

require(['/Scripts/modules/config.js'], function () {
    require(['modules/user-register', 'modules/validation-addon', 'jquery.validate.unobtrusive'], 

     function (userregistration) {
        //using user registration module here..
    }

  );
});

---

如果这解决了您的问题，您可能不想让代码保持这样，但这是一种快速简便的方法来检查这是否是问题。

这看起来像是一个计时问题。在执行重新加载时，这些问题有时很明显，因为初始化的顺序取决于缓存中的内容等

现在有可能

jquery.validate.unobtrusive

在执行调用

$.validator.setDefaults

的代码之前在DOM上执行其工作。要检查在

jquery.validate.unobtrusive

之前是否执行

$.validator.setDefaults

，请从

validation addon.js

中删除

jquery.validate.unobtrusive

要求，并将其添加到主文件中

将

validation addon.js

更改为：

define(['jquery', 'jquery.validate'], 

function ($) {

    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        }
    });

    ....
});

require(['/Scripts/modules/config.js'], function () {
    require(['modules/user-register', 'modules/validation-addon', 'jquery.validate.unobtrusive'], 

     function (userregistration) {
        //using user registration module here..
    }

  );
});

并将

register.cshtml

更改为：

define(['jquery', 'jquery.validate'], 

function ($) {

    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        }
    });

    ....
});

require(['/Scripts/modules/config.js'], function () {
    require(['modules/user-register', 'modules/validation-addon', 'jquery.validate.unobtrusive'], 

     function (userregistration) {
        //using user registration module here..
    }

  );
});

---

如果这解决了您的问题，您可能不想让代码保持这样，但这是一种快速简便的方法来检查这是否是问题。

我假设您在.net项目中没有使用优化器（仅在node js中可能使用r.js）。你应该给你的模块命名。定义（'modulename'，['dep1'，'dep2']，函数（d1，d2）{…}）@KyorCode，但是我的其他模块工作正常，顺便说一句，从requirejs文档

中可以看出，通常最好避免使用模块名称进行编码，让优化工具在模块名称中烧掉。

，但是现在如果我没有使用r.js（优化工具），我有点困惑此外，除了上述问题外，没有定义模块名称，也没有定义其他模块如何正常工作？？？@gaurav忽略KyorCode的建议。这与您面临的问题无关。我假设您在.net项目中没有使用优化器（仅在node js中可能使用r.js）。你应该给你的模块命名。定义（'modulename'，['dep1'，'dep2']，函数（d1，d2）{…}）@KyorCode，但是我的其他模块工作正常，顺便说一句，从requirejs文档

中可以看出，通常最好避免使用模块名称进行编码，让优化工具在模块名称中烧掉。

，但是现在如果我没有使用r.js（优化工具），我有点困惑此外，除了上述问题外，没有定义模块名称，也没有定义其他模块如何正常工作？？？@gaurav忽略KyorCode的建议。这与您面临的问题无关。事实上，我没有手动调用字段上的validate方法，我使用了输入元素（标记）中的data-*属性，如果用户在输入字段中输入错误的值，它会进一步自动调用validate。是的，这是

jquery.validate.unobtrusive

实现的。它读取数据-*attrubutes并将相应的处理程序附加到字段中，您是否可以明确提到您希望看到的代码的哪一部分？？它从一开始就存在，实际上我正在使用MVC html帮助器方法生成字段，因此，这些助手方法会根据服务器端模型属性上定义的DataAnnotation自动添加适当的数据-*，并在服务器上编译视图，从服务器返回html字符串，在浏览器上显示更新的答案以及我能想到的最后一个计时问题。（顺便说一句，我已经开始删除我对这个答案的一些评论，以删除不再有用的东西。）太好了，路易斯，你的想法很完美，它解决了我的问题，谢谢！事实上，我并不是在字段上手动调用validate方法，我在输入元素（标记）中使用了data-*属性，如果用户在输入字段中输入错误的值，它会进一步自动调用validate。是的，它是

jquery.validate.unobtrusive

，可以完成这项工作。它读取数据-*attrubutes并将相应的处理程序附加到字段中，您是否可以明确提到您希望看到的代码的哪一部分？？它从一开始就存在，实际上我正在使用MVC html帮助器方法生成字段，因此，这些助手方法会根据服务器端模型属性上定义的DataAnnotation自动添加适当的数据-*，并在服务器上编译视图，从服务器返回html字符串，在浏览器上显示更新的答案以及我能想到的最后一个计时问题。（顺便说一句，我已经开始删除我对这个答案的一些评论，以删除那些不再有用的东西。）太好了，路易斯，你的想法太完美了