jquery css change causes typeError is null

Question

Hey all i am wondering why i am getting this error with the following code:

The javascript:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
 <script src="http://max.jotfor.ms/min/g=jotform?3.0.3359" type="text/javascript"></script>

 function checkInput() {
if ($("#input_3") === null) {
    $('#error1').css('display', 'block');
        $('#error1').css('visibility', 'visible');
}
 ....

The CSS:

 .ErrorBlock1 {
    display: none;
    visibility: hidden;     
    background-color:#F00;
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
 }

the HTML:

 <div id="cid_3" class="form-input-wide">
    <input name="q3_firstName3" type="text" class="form-textbox validate[required, Alphabetic]" id="input_3" size="25" style="width: 265px; height: 25px; background: transparent url(textfield.png) no-repeat center center; border: none;" onBlur="checkInput();" />
 <div class="ErrorBlock1" id="error1">First Name Req.</div>
 </div>

I am getting this error when running it:

Timestamp: 9/17/2012 9:10:15 AM
Error: TypeError: $("#error1") is null

Why am i getting this???

display: visible is invalid CSS.

Blazemonger
– Blazemonger

2012-09-17 13:10:21 +00:00
Commented Sep 17, 2012 at 13:10 — Blazemonger
– Blazemonger, Commented Sep 17, 2012 at 13:10
This means jQuery is not loaded.

Ram
– Ram

2012-09-17 13:10:50 +00:00
Commented Sep 17, 2012 at 13:10 — Ram
– Ram, Commented Sep 17, 2012 at 13:10
Corrected. Thanks. But still have the error.

StealthRT
– StealthRT

2012-09-17 13:10:57 +00:00
Commented Sep 17, 2012 at 13:10 — StealthRT
– StealthRT, Commented Sep 17, 2012 at 13:10

DanielB · Accepted Answer · 2012-09-17 13:13:52Z

4

$('#input_3') will never return null. It will always be a jQuery object.

Check for its existence with $('#input_3').length != 0.

edited Sep 17, 2012 at 13:13

answered Sep 17, 2012 at 13:10

DanielB

20.3k2 gold badges48 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StealthRT Over a year ago

Seems to be related to something with the JotForm JS... geerrr. When i take that js out it works.

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

For you use both display and visibility :

jsBin demo

CSS:

.ErrorBlock1 {
    display: none; 
    visibility: hidden;
    background-color:#F00;
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
 }

jQUery:

function checkInput() {
  if ($("#input_3").val().length) {
      $('#error1').show().css({visibility:'visible'});
  }else{
      $('#error1').hide().css({visibility:'hidden'});
  }
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 17, 2012 at 13:08

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

4 Comments

StealthRT Over a year ago

I'm getting Error: TypeError: $("#input_3") is null with that.

xivo Over a year ago

if ($("#input_3").val().length > 0) { } is probably what he meant.

StealthRT Over a year ago

Seems to be related to something with the JotForm JS... geerrr. When i take that js out it works.

StealthRT Over a year ago

@roXon: Thanks for the demo there! It helped a lot!

Collectives™ on Stack Overflow

jquery css change causes typeError is null

2 Answers 2

1 Comment

jsBin demo

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related