0

I have a js file that is written in jQuery (3.1.0) and just one line plain javascript.

for example:

$(window).on('load',function(){
 var email = $('#email');
 function setMessage(str){ 
  document.getElementById('email').setCustomValidity(str);
 };
 email.bind('keyup',function(){
  if(email.val()==''){
    setMessage('Box is Empty');
  }
 });
});

It worked fine when it was like this.

Next step is minify the js file, that's when problem starts where console keeps on screaming Uncaught TypeError: Cannot read property 'setCustomValidity' of null - jquery-3.1.0.min.js.

Sources I used:

setCustomValidity

Make sure semi-colon - Checked

Community
  • 1
  • 1
roger
  • 1,225
  • 2
  • 17
  • 33
  • jquery is javascript - so .. you have 11 lines of javascript – Jaromanda X Feb 02 '17 at 04:16
  • Sounds weird... Could you show the corresponding minified code, and a live [MCVE] ? – Kaiido Feb 02 '17 at 04:39
  • @JaromandaX no this is example and shorter version of what I wrote. – roger Feb 02 '17 at 05:50
  • yes, but count the lines in the code ... that's how many lines of javascript you have – Jaromanda X Feb 02 '17 at 05:51
  • @Kaiido I use [jscompress](https://jscompress.com), and I can't show you my actual code. But it will be similar to the one from above when you run it compiles it. After compile this, the bit with the problem looks like this function(a){document.getElementById("email").setCustomValidatity(a)} – roger Feb 02 '17 at 05:56
  • @JaromandaX haha I get it now, still it does not explain the error with the setCustomValidity – roger Feb 02 '17 at 06:01
  • 1
    Make sure that there is actually an element with the id `email` accessible in the document when the code runs, I'm guessing there isn't. `document.getElementById` returns `null` if it doesn't find an element, so if it doesn't find an element with the id `email` you are trying to access the `setCustomValidity` method of `null`, which doesn't exist, thus the error message about not being able to read the `setCustomValidity` property of `null`. – Useless Code Feb 02 '17 at 06:20
  • @UselessCode yes that solves my problem, thank you. Please post it your comment below, and I will mark it as correct answer. Instead of using `document.getElementById` right out, `var elm = document.getElementById('email'); if(elm){ /*do something*/}`. No more error, but still curious why does it work before I minify it? – roger Feb 03 '17 at 01:22
  • 1
    If there were no `#email` in the document, the `keyup` event bound to it would not fire, hence no call made to `setMessage` either ; except if its `id` has been changed since the binding... cc @UselessCode – Kaiido Feb 03 '17 at 06:51
  • @Kaiido Ah... correct, didn't notice the event was bound to `#email`. Is there a reason you are using `document.getElementById('email').setCustomValidity` instead of [`email[0].setCustomValidity`](http://api.jquery.com/get/)? That error message seems to indicate that the error is coming from within jquery-3.1.0.min.js, not your code; what are you using to minify it? Is it possible that the minifier knows you are using jQuery and is turning your DOM method into a jQuery object and causing the problem? – Useless Code Feb 07 '17 at 06:22
  • I used `email[0].setCustomValidity` when I first started, but I kept getting error and I read somewhere `setCustomValidity` is not a jquery method and I couldn't verify it. I have same feeling about minifier knows that I am using jQuery, but how. The file i downloaded from [jscompress](https://jscompress.com/) doesn't look anything that suggests that. It looks mostly like this `var isTrue = !1 function(a){return a+a}`. Also if turning `document.getElementById('email').setCustomValidity` into jQuery caused the problem, then it should be causing a problem when it was in used. – roger Feb 07 '17 at 10:21

1 Answers1

0

Rather than using window.onload using document.ready

Refer this for difference between onload and document.ready as the error which you are facing is due to the element not loaded and you are trying to access element before document is fully loaded

https://stackoverflow.com/a/3698214/1569443

Use below code 

$('document').ready(function(){
       var email = $('#email');
       function setMessage(str){ 
       document.getElementById('email').setCustomValidity(str);
      };
    email.bind('keyup',function(){
        if(email.val()==''){
        setMessage('Box is Empty');
        }
    });
});
Community
  • 1
  • 1
Abhishekkumar
  • 1,102
  • 8
  • 24
  • why? `window.onload` fires **after** `$(function() {` - so no timing issues ... sorry, that's **after** `$('document').ready(function(){` (do people still use the old school jQuery document ready?) – Jaromanda X Feb 02 '17 at 04:18
  • I saw this awhile ago [https://learn.jquery.com/using-jquery-core/document-ready/](https://learn.jquery.com/using-jquery-core/document-ready/) – roger Feb 02 '17 at 05:08