CODEWITHSUNDEEP
javascriptjquery
None
None

Reputation: 9247

Cannot read property 'setCustomValidity' of 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 textbox:

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

But i get an error Cannot read property 'setCustomValidity' of null in console...what am i doing wrong? I see that is working here http://jsfiddle.net/B4hYG/437/ but for me its not...is it beacause of mvc or what?

Upvotes: 4

Views: 4175

Answers (3)

Bambier
Bambier

Reputation: 846

In react you should use event.target.setCustomValidity

Upvotes: 0

Jamie Barker
Jamie Barker

Reputation: 8246

That script, where in your code is it located? I'm guessing it's located in the header?

In your example, if you change the second drop-down at the top left to No wrap - in <head>, you get the error you described and you can see it being broken here.

This is because your elements haven't been created yet. Either you need to move your InvalidInputHelper function call to the bottom of the page so it runs after the elements are created, or you need to wrap it in a function to tell it to not fire until everything has run.

If you are definitely using jQuery you can wrap it with the ready function like so:

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

and here it is working.

Or if you prefer a pure JavaScript solution you can use the vanilla alternative found here.

To reiterate though, the easiest way would be to move the call to the bottom of the page, if you can.

Upvotes: 2

Albicocco
Albicocco

Reputation: 151

i cannot "add a comment"... i reply here...

I think that the problem could be the 'document.getElementById("firstname")'.

You get it after the DOM is ready? (i don't know how MVC work)

Try to put your code:

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

in document loaded function (example for jquery: $(function() { /* your code here */ }); )

Upvotes: 1

Related Questions