javascript - Cannot read property 'setCustomValidity' of null? -
i have 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 firstname !", emptytext: "please enter firstname!", invalidtext: function (input) { return 'the firstnames "' + input.value + '" invalid!'; } }); and have textbox:
@html.textboxfor(m => m.register.firstname, new { id = "firstname", @class = "form-control", @required = "required" }) but error cannot read property 'setcustomvalidity' of null in console...what doing wrong? see working here http://jsfiddle.net/b4hyg/437/ me not...is beacause of mvc or what?
that script, in code located? i'm guessing it's located in header?
in example, if change second drop-down @ top left no wrap - in <head>, error described , can see being broken here.
this because elements haven't been created yet. either need move invalidinputhelper function call bottom of page runs after elements created, or need wrap in function tell not fire until has run.
if using jquery can wrap ready function so:
$('document').ready(function(){ invalidinputhelper(document.getelementbyid("firstname"), { defaulttext: "please enter firstname !", emptytext: "please enter firstname!", invalidtext: function (input) { return 'the firstnames "' + input.value + '" invalid!'; } }); }); and here working.
or if prefer pure javascript solution can use vanilla alternative found here.
to reiterate though, easiest way move call bottom of page, if can.
Comments
Post a Comment