我有这个脚本:
(function (exports) {
function valOrFunction(val, ctx, args) {
if (typeof val == "function") {
return val.apply(ctx, args);
} else {
return val;
}
}
function InvalidInputHelper(input, options) {
input.setCustomValidity(valOrFunction(options.defaultText, window, [input]));
function changeOrInput() {
if (input.value == "") {
input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
} else {
input.setCustomValidity("");
}
}
function invalid() {
if (input.value == "") {
input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
} else {
console.log("INVALID!"); input.setCustomValidity(valOrFunction(options.invalidText, window, [input]));
}
}
input.addEventListener("change", changeOrInput);
input.addEventListener("input", changeOrInput);
input.addEventListener("invalid", invalid);
}
exports.InvalidInputHelper = InvalidInputHelper;
})(window);
InvalidInputHelper(document.getElementById("firstname"), {
defaultText: "Please enter an firstname !",
emptyText: "Please enter an firstname!",
invalidText: function (input) {
return 'The firstnames "' + input.value + '" is invalid!';
}
});
我有这个文本框:
@Html.TextBoxFor(m => m.Register.FirstName, new { id = "firstname", @class = "form-control", @required = "required" })
但是我收到一个错误 Cannot read property 'setCustomValidity' of null in console...我做错了什么？我看到它在这里工作 http://jsfiddle.net/B4hYG/437/但对我来说不是...是因为 mvc 还是什么？
最佳答案
那个脚本，它在你的代码中的什么位置？我猜它位于标题中？
在您的示例中，如果将左上角的第二个下拉列表更改为 No wrap - in <head> ，你会得到你描述的错误，你可以看到它被破坏了 here .
这是因为您的元素尚未创建。要么你需要移动你的 InvalidInputHelper对页面底部的函数调用，以便它在创建元素后运行，或者您需要将其包装在一个函数中以告诉它在所有内容运行之前不要触发。
如果你确实在使用 jQuery，你可以用 ready 包装它像这样的功能:
$('document').ready(function(){
InvalidInputHelper(document.getElementById("firstname"), {
defaultText: "Please enter an firstname !",
emptyText: "Please enter an firstname!",
invalidText: function (input) {
return 'The firstnames "' + input.value + '" is invalid!';
}
});
});
或者，如果您更喜欢纯 JavaScript 解决方案，您可以使用找到的原始替代方案 here .
重申一下，如果可以的话，最简单的方法是将调用移至页面底部。
关于javascript - 无法读取 null 的属性 'setCustomValidity'？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30636675/