CODEWITHSUNDEEP
javascriptjquery
4lackof
4lackof

Reputation: 1390

JS - See which "or" evaluated true in if statement

I have the following JS (with jQuery):

if ($('#username').val() === '' || $('#password').val() === '') {
  return;
}
$.ajax(); //run an ajax call to the server for password verif (this would have proper ajax code).

What this means is: if the username (#username) or password (#password) field are blank, then return.

I want to give the user a message if this is the case. Something like:

if ($('#username').val() === '' || $('#password').val() === '') {
  if ($('#username').val() === '' && $('#password').val() !== '') {
    alert('Please enter a username');
    return;
  }
  if ($('#username').val() !== '' && $('#password').val() === '') {
    alert('Please enter a password');
    return;
  }
  alert('Username and password fields cannot be blank');
}

However, that is a lot of code. I am looking for something like an XOR/^ operator (from SQL), but for JS. Or something which says, "Good! The first expression was true and the second one was false - he didn't enter in a username but entered in a password. Let's tell him to enter in a username. Or - he didn't enter in a password? Tell him to enter in a password. And finally - he didn't enter in anything? Well tell him to enter in a username and password.

I am aware that the current code I have would do that, but I am looking for a simpler, more DRY conformant code.

My research on google has not come up with any solutions, and thus I am asking stackoverflow.

Thank you.

Upvotes: 0

Views: 67

Answers (5)

Bergi
Bergi

Reputation: 665286

If you only want to use if statements, you can simplify the code to

var usernameMissing = $('#username').val() === '';
var passwordMissing = $('#password').val() === '';
if (usernameMissing || passwordMissing) {
    if (usernameMissing && !passwordMissing) {
        alert('Please enter a username');
    } else if (!usernameMissing && passwordMissing) {
        alert('Please enter a password');
    } else {
        alert('Username and password fields cannot be blank');
    }
    return;
}

or 

var usernameMissing = $('#username').val() === '';
var passwordMissing = $('#password').val() === '';
if (usernameMissing && !passwordMissing) {
    alert('Please enter a username');
    return;
}
if (!usernameMissing && passwordMissing) {
    alert('Please enter a password');
    return;
}
if (usernameMissing || passwordMissing) {
    alert('Username and password fields cannot be blank');
    return;
}

However, to really cut down on the code you would use an array:

var missing = [];
if ($('#username').val() === '') {
    missing.push("username");
}
if ($('#password').val() === '') {
    missing.push("password");
}
if (missing.length > 0) {
    alert("Please enter "+missing.join(" and ")+"!");
    return;
}

which you can further generalise with a loop if you have more fields.

Upvotes: 2

Shubham
Shubham

Reputation: 1793

Why so many conditions? You could do it like this:

if ($('#username').val() === '') {
    alert('Please enter a username');
    return;
} else if ($('#password').val() === '') {
    alert('Please enter a password');
    return;
}

Upvotes: 0

Titus
Titus

Reputation: 22484

You can use else if(...) statements, something like:

if ($('#username').val() === '' && $('#password').val() === '') {
  alert('Username and password fields cannot be blank');
}else if($('#username').val() === ''){
   alert('Please enter a username');
}else if($('#password').val() === ''){
   alert('Please enter a password');
}else{
   // All Good.
}

Upvotes: 0

Justinas
Justinas

Reputation: 43519

Simply loop your required fields and add message to data attribute. This can be used for any number of fields without changing JS code.

$(document).ready(function() {
  $(document).on('submit', 'form', function() {
    var valid = true;
    $('label.required').css({
      'border-color': 'grey'
    }).find('.error').remove();

    $('label.required').each(function() {
      if (!$(this).find('input').val().length) {
        valid = false;

        $(this)
          .css({
            border: '1px solid red'
          })
          .append('<div class="error">' + $(this).data('msg') + '</div>');
      }
    });

    return valid;
  })
});
label {
  border: 1px solid grey;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label class='required' data-msg="You must enter username">
    Username:
    <input type="text" id="username" />
  </label>
  <label class='required' data-msg="Password can not be empty">
    Password:
    <input type="password" id="password" />
  </label>
  <button>Login</button>
</form>

Upvotes: 2

AB Udhay
AB Udhay

Reputation: 753

You can simply do empty check by this way. It is precise to check with a trim for whitespace also.

  if (!$('#username').val()) {
    alert('Please enter a username');
    return;
  }
  if (!$('#password').val()) {
    alert('Please enter a password');
    return;
  }

Upvotes: 2

Related Questions