Question

我有这个脚本：

 (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" })

但我收到错误无法读取属性＆＃39; setCustomValidity＆＃39;控制台中的null ...我做错了什么？我看到它在这里工作http://jsfiddle.net/B4hYG/437/但对我来说它不是......它是因为mvc还是什么？

Answer 1

那个脚本，你的代码在哪里？我猜它位于标题中？

在您的示例中，如果您将左上角的第二个下拉列表更改为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!';
        }
    });
});

和here it is working。

或者，如果您更喜欢纯JavaScript解决方案，则可以使用找到here的vanilla替代方案。

重申一下，如果可以，最简单的方法是将呼叫转移到页面底部。

Answer 2

我不能＆＃34;添加评论＆＃34; ...我在这里回复......

我认为问题可能是＆＃39; document.getElementById（＆＃34; firstname＆＃34;）＆＃39;。

在DOM准备好之后你能得到它吗？（我不知道MVC是如何工作的）

尝试输入您的代码：

InvalidInputHelper(document.getElementById("firstname"), {
    defaultText: "Please enter an firstname !",
    emptyText: "Please enter an firstname!",
    invalidText: function (input) {
        return 'The firstnames "' + input.value + '" is invalid!';
    }
});

在文档加载函数中（jquery的例子： $(function() { /* your code here */ });）

无法阅读属性＆quot; setCustomValidity＆＃39;是吗？

2 个答案: