Geek Answers Handbook

Can't read setCustomValidity property from null?

I have this script:

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

and I have this text box:

  @Html.TextBoxFor(m => m.Register.FirstName, new { id = "firstname", @class = "form-control", @required = "required" })

But I get an error I can't read the setCustomValidity null property in the console ... what am I doing wrong? I see that http://jsfiddle.net/B4hYG/437/ works here , but for me it is not ... is it because from mvc or what?

+4
source share
2 answers

What is the script where in your code is it? I assume it is in the title?

In your example, if you change the second drop-down list in the upper left corner to No wrap - in <head>, you will get the error you described, and you will see that it is broken. .

, . 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, , .

, , .

+2

" "... ...

, "document.getElementById(" firstname ")".

, 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 */ });)

+1

More articles:


All Articles