How to use JavaScript (or JQuery) to check if an input is empty or has a certain string?

Question

I'm doing some validation on a calculator form I'm building and I want to a show a 'Please fill this field' message if the user hasn't entered a figure into the input.

By default, the field has a '0' in it.

So I want to check if the field is empty or has the string '0'.

Should also mention that there is a script running that prevents the user from entering non-numeric characters.

This is part of a series of checks in if/else statements. For this case, I already have one condition (to pick up a previous choice the user has made).

So I have something like:

if ( calcChoice == 1 && $( "#input-loan" ).val() == "0" ) {
    console.log("User input missing"); 
    $( "#input_loan" ).addClass( "error" );
} else if ( calcChoice == 1 && $( "#input-pay" ).val() == "" ) {
    console.log("User input missing"); 
    $( "#input_loan" ).addClass( "error" );
} else if ( calcChoice == 2 && $( "#input-loan" ).val() == "0" ) {
    console.log("User input missing"); 
    $( "#input_loan" ).addClass( "error" );
} else if ( calcChoice == 2 && $( "#input-pay" ).val() == "" ) {
    console.log("User input missing"); 
    $( "#input_loan" ).addClass( "error" );

I'd like to streamline this a bit. What I'd really like is something like:

if ( calcChoice == 1 && $( "#input-loan" ).val() == "" || "0"; ) {
    //do something;
}

Any ideas?

I've looked at the following related questions but haven't been able to work it out from their answers:

How do you check for an empty string in JavaScript?

JavaScript: Simple way to check if variable is equal to two or more values?

Your regex seems to work fine, if I input test strings such as `test` (false), `0` (true) and the like. — nils, Nov 19 '15 at 11:35
When I use that regex, no matter what number I put in the input, I get the validation error. — devrua, Nov 19 '15 at 12:11
`/^(|0)$/.test( '1' );` returns false, `/^(|0)$/.test( '0' );` returns true, so this seems to work fine — nils, Nov 19 '15 at 12:13
When I put in inline `if ( /^(|0)$/.test( $( "#input_loan" ).val() ) )` it picks up everything I enter, all numbers from 0 upwards, and it picks up empty. — devrua, Nov 19 '15 at 12:29
This must be a problem with your jQuery selector then. `if ( /^(|0)$/.test( '0' )) { console.log('error'); }` logs `error` to the console, whereas `if ( /^(|0)$/.test( '1' )) { console.log('error'); }` does not. — nils, Nov 19 '15 at 12:46
It does work! Sorry for all the back and forth. I've amended the question so as not to mislead people and also put in this solution in the answers. Thanks for you persistence! — devrua, Nov 19 '15 at 12:52

score 2 · Accepted Answer · answered Nov 19 '15 at 11:32

2

var goodValues = ["","0"];
if( goodValues.indexOf( $( "#input-loan" ).val() ) !== -1 ) {
    //good
}

answered Nov 19 '15 at 11:32

RiccardoC

876
5
10

This approach will treat one or many whitespaces as valid input. You should use `trim` to avoid that problem. Also I would argue that `goodValues` is a bad name, `invalidValues` would be more accurate. – user5325596 Nov 19 '15 at 11:57

score 1 · Answer 2 · answered Nov 19 '15 at 11:41

1

You could write

if($( "#input-loan" ).val() + 0 == 0)
{
    // do smth.
}

Not sure if this approach is good but it works for me

answered Nov 19 '15 at 11:41

akmed0zmey

553
6
14

score 0 · Answer 3 · answered Nov 19 '15 at 11:34

if ( calcChoice == 1 && ($( "#input-loan" ).val() == "" || $( "#input-loan" ).val() == "0") ) { //do something; }

Try this seems to be mistaken here. Similarly, you can also use $.isEmptyObject(object) to ensure whether the value is empty or not.

user5325596 · Answer 4 · 2015-11-19T11:55:17.420

A solution could be based on the following.

  var loanInput =  $( "#input-loan" );
  var payInput = $( "#input-pay" );
  var loanValue = +loanInput.val(); //+ converts string to number
  var payValue =  +payInput.val();


  if (!loanValue) { 
    loanInput.addClass( "error" );
  }

  if (!payValue) {
    payInput.addClass( "error" );
  }

As an aside, note that instead of having a default value of "0" in your inputs you could set the placeholder attribute of the input to 0.

<input type="text" placeholder="0" />

That way you don't need to check if the input is "0", and you could actually treat "0" as a valid input if desired.

devrua · Answer 5 · 2015-11-19T12:13:52.420

Thanks for answering everyone. Really good solutions here. Seems so obvious now to have a '0' placeholder and only test for empty. Also akmed0zmey's solution is ingenious.

I forgot to mention that there is no need to trim as I have a script running that prevents the users from putting in non-numeric characters, including spaces. I have updated the original question to include this.

I went with RicardoC's solution as it most closely answers the specific problem I asked and it's a good method to retain for the future - I could have a series of strings to test against.

Thanks!

devrua · Answer 6 · 2015-11-19T12:51:23.347

For the record, this regex test also works. It's testing for an empty string or the string '0':

 if ( calcChoice == 1 && /^(|0)$/.test( $( "#input_loan" ).val() ) ) {
        //do something
 } else if ( calcChoice == 2 && /^(|0)$/.test( $( "#input_pay" ).val() ) ) {
        // do something
 }

I had tried this before but there must have been a problem elsewhere in my code. Now it works. (Cheers to Nils in the comments to the question for pointing out that this works).

How to use JavaScript (or JQuery) to check if an input is empty or has a certain string?

6 Answers6