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, Oct 11 '16 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, Oct 11 '16 at 15:40
@adeneo You mean, store all values in an array and go from there? — Vadzim Savenok, Oct 11 '16 at 15:42
@VadzimSavenok OK, then why would a text box ever have the value `null` as opposed to an empty string? — VLAZ, Oct 11 '16 at 15:42
@vlaz Not null necessarily, just does not have a value, since I do not put input in it. — Vadzim Savenok, Oct 11 '16 at 15:43
`[].slice.call( document.querySelectorAll('.textbox') ).some( el => el.value === "" )` etc — adeneo, Oct 11 '16 at 15:44
Do like `[...element.querySelectorAll(selector)].filter(e => e.value === null).length === 1 ? doThis() : doThat()` — Redu, Oct 11 '16 at 15:50

kevin ternet · Answer 1 · 2016-10-11T15:59:18.647

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 '16 at 15:59

answered Oct 11 '16 at 15:46

kevin ternet

4,514
2
19
27

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. – Vadzim Savenok Oct 11 '16 at 15:48

Pointy · Accepted Answer · 2016-10-11T16:01:29.197

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.

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. — Vadzim Savenok, Oct 11 '16 at 15:57

Vibhesh Kaul · Answer 3 · 2016-10-11T16:04:07.580

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[]">

score 1 · Answer 4 · answered Oct 11 '16 at 16:10

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 '16 at 16:10

demarchisd

734
3
16

1

It is good for small values, but if number grows to 10 or 20, it becomes a long line. – Vadzim Savenok Oct 11 '16 at 16:12
You're right, I've missed the "regardless of how many textboxes" part – demarchisd Oct 11 '16 at 16:14
I still appreciate this answer because I was looking explicitly for a small number. +1 – Summitch Feb 11 '20 at 22:22

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

4 Answers4

Linked