How to check if only one value is not null in Javascript?

Question

Let's say I have 3 textboxes in cshtml. What I am trying to do in Javascript is the following:

Check if ANY OF those 3 values and ONLY THEM is not null.

The only way I can think of is doing it manually:

if ((val1 & !val2 & !val3) || (!val1 & val2 & !val3) || (!val1 & !val2 & val3))

It is okay if it is a small number of textboxes, but if such number grows to 10+, it might become a hassle.

Is there any efficient way to implement such logic in Javascript regardless of how many textboxes we are dealing with?

Why would a checkbox ever have the value null, it should always return a string ? — adeneo
– adeneo, Commented Oct 11, 2016 at 15:39
And yes, there are at least somewhat efficient ways to write such code, using a common selector and Array.some etc. — adeneo
– adeneo, Commented Oct 11, 2016 at 15:40
@VadzimSavenok OK, then why would a text box ever have the value null as opposed to an empty string? — VLAZ
– VLAZ, Commented Oct 11, 2016 at 15:42
Do like [...element.querySelectorAll(selector)].filter(e => e.value === null).length === 1 ? doThis() : doThat() — Redu
– Redu, Commented Oct 11, 2016 at 15:50

kevin ternet · Accepted Answer · 2016-10-11 15:59:18Z

2

just keep in th array values not null and then count how many remains :

var arr = ["hello", "", ""];

var result = arr.filter(x => x !== "").length;

if (result === 1) console.log("exactly one is not empty");

edited Oct 11, 2016 at 15:59

answered Oct 11, 2016 at 15:46

kevin ternet

4,6322 gold badges21 silver badges27 bronze badges

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

1 Comment

Vadzim Savenok Over a year ago

It is partially of what I need, but I also need to make sure EXACTLY ONE element is not empty. In your case, it sounds AT LEAST ONE element is not empty.

Pointy · Accepted Answer · 2016-10-11 16:01:29Z

1

You can use .reduce:

var nonEmpty = [val1, val2, val3].reduce(((c, v) => c += (v !== "")), 0);
if (nonEmpty === 1) {
  // exactly one is not empty
}

Any other way of counting the non-empty inputs and checking that the count is equal to 1 would work too of course.

What that .reduce() code does is use an "arrow function" that increments a counter (c) when a value is not the empty string. (If you want to check for null, you can do that instead of course.) You could use a plain old-fashioned function too:

var nonEmpty = [val1, val2, val3].reduce(function(c, v) {
  return c += (v !== "");
}, 0);

The .reduce() function is passed 2 parameters: that callback function, and the initial value of c (zero in this case). The return value will be the final value of c returned by the last call to the callback.

edited Oct 11, 2016 at 16:01

answered Oct 11, 2016 at 15:52

Pointy

415k62 gold badges600 silver badges631 bronze badges

2 Comments

Vadzim Savenok Over a year ago

I believe that might be exactly what I need. Can you please briefly explain the logic inside reduce method, so I can get the idea of properly using it.

Pointy Over a year ago

@VadzimSavenok yes I will extend the answer

Vibhesh Kaul · Accepted Answer · 2016-10-11 16:04:07Z

1

You can directly check the textboxes for the values. If you are working in razor means you can use Jquery. Also this solution will work for any number of textboxes.

 var count=0;
 var isExactlyOneNotEmpty= 
    function(){
    $('input[name="text[]"]').each(function() {
        if($(this).val()!="")
        {
          ++count;
        }
    });
    if(count==1)
    return true
    else
    return false;
    }
 var check=isExactlyOneNotEmpty();
 alert(check);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1" name="text[]">
<input type="text" id="text2" name="text[]" value="test">
<input type="text" id="text3" name="text[]">

edited Oct 11, 2016 at 16:04

answered Oct 11, 2016 at 15:57

Vibhesh Kaul

2,6211 gold badge24 silver badges39 bronze badges

Comments

demarchisd · Accepted Answer · 2016-10-11 16:10:46Z

1

You could use the Exclusive OR (XOR) operator for that. Let's see what we can get with it:

However, the only result that doesn't fit your need is the last one (it returns true when all of them are also true).

To solve that, you could check if all values are not true at the same time. Summarizing, this expression does the trick:

if( !(val1 && val2 && val3) && (val1^val2^val3) )

answered Oct 11, 2016 at 16:10

demarchisd

7323 silver badges17 bronze badges

3 Comments

Vadzim Savenok Over a year ago

It is good for small values, but if number grows to 10 or 20, it becomes a long line.

demarchisd Over a year ago

You're right, I've missed the "regardless of how many textboxes" part

Summitch Over a year ago

I still appreciate this answer because I was looking explicitly for a small number. +1

Collectives™ on Stack Overflow

How to check if only one value is not null in Javascript?

4 Answers 4

1 Comment

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related