JavaScript - not able to check for null value

Question

I'm putting together a simple form validation, but I seem to be having an issue with checking for null value in a few of my select elements. I've abbreviated the option lists in my example below...

<select class='species_select' id='species'+siteNumber+'1'>
    <option disabled selected>Select species</option>
    <option value='unknown'>unknown</option>
</select>

<select class='species_select' id='species'+siteNumber+'2'>
    <option disabled selected>Select species</option>
    <option value='unknown'>unknown</option>
</select>

<script>
$(document).on("click", "#next_to_summary", function(){

    var proceed = true;

    $(".species_select").each(function() {

        if (this.value === null){
            alert("Please select the species");
            proceed = false;
        };
});
</script>

While experimenting with this, I found that if I assigned a value to the disabled selected option and checked for that, the code worked just fine - the alert fired when the select had not been changed. I'd rather check for null, though...

Am I not checking for null correctly? Thanks very much.

Are you sure that the empty value is a null and not a empty '' — Michael, Apr 06 '16 at 18:35
Here is a good thread that talks about null checks in javascript that may be helpful: http://stackoverflow.com/a/27550756/3329778 — Marcus Hoelscher, Apr 06 '16 at 18:36
Just `if (this.value){` No need of `strict-comparison` as `value` will be `''` — Rayon, Apr 06 '16 at 18:38

Bruno Toffolo · Answer 1 · 2016-04-06T18:38:52.317

You should not check for null with ===, but with == instead.

As stated in the null documentation page in MDN,

When checking for null or undefined beware of the differences between equality (==) and identity (===) operators (type-conversion is performed with the former).

The strict equality operator (===) returns true if the operands are strictly equal (see above) with no type conversion. In this case, as null is one of JavaScript's primitive values, it is not strictly equal to any other type of object.

After replacing === with ==, your code would then become

    if (this.value == null) {
        alert("Please select the species");
        proceed = false;
    };

Ah - thank you. Yes, I see that it is appropriate to use == rather than ===. However, the code here still didn't work - I needed to use jQuery, as in the answer that I accepted. — skwidbreth, Apr 06 '16 at 20:03

score 1 · Accepted Answer · answered Apr 06 '16 at 18:35

1

Since you're using jQuery, you should rely on $(this).val() to expect null results from non-selected select form fields:

 if ($(this).val() === null) {

http://api.jquery.com/val/

answered Apr 06 '16 at 18:35

Steve Hynding

1,262
1
9
21

Thank you! Works perfectly. – skwidbreth Apr 06 '16 at 19:59

score 0 · Answer 3 · answered Apr 06 '16 at 18:35

Please change your code as below :

<select class='species_select' id='species'+siteNumber+'1'>
    <option disabled selected value="">Select species</option>
    <option value='unknown'>unknown</option>
</select>

<select class='species_select' id='species'+siteNumber+'2'>
    <option disabled selected value="">Select species</option>
    <option value='unknown'>unknown</option>
</select>

<script>
$(document).on("click", "#next_to_summary", function(){

    var proceed = true;

    $(".species_select").each(function() {

        if ($.trim(this.value) == ""){
            alert("Please select the species");
            proceed = false;
        };
});
</script>

score -1 · Answer 4 · edited Apr 07 '16 at 00:23

-1

if($(this).val() == null || $(this).val() == undefined)

edited Apr 07 '16 at 00:23

showdev

25,529
35
47
67

answered Apr 06 '16 at 18:43

maikelm

383
5
28

1

Some explanation would greatly improve this post. Also, because you've used equal (`==`) rather than strict equal (`===`), you only need to check for null, as that will also [return true for undefined](http://stackoverflow.com/questions/5101948/javascript-checking-for-null-vs-undefined-and-difference-between-and). In general, you should avoid the `==` operator in javascript. It frequently surprises, which is bad. – JDB still remembers Monica Apr 06 '16 at 19:29

JavaScript - not able to check for null value

4 Answers4