Javascript multiple IDs in "if ()"

Question

I want to select both IDs but i dont know how to do that.
I added humane.js and I want to display error message for both fields.

Thanks.

Here is my code:

var flatty1 = humane.create({
  baseCls: 'humane-flatty',
  addnCls: 'humane-flatty-success',
  timeout: 2500
});
var flatty2 = humane.create({
  baseCls: 'humane-flatty',
  addnCls: 'humane-flatty-error',
  timeout: 2500
});

function check() {
  if (document.getElementById('name').value == 0) {
    flatty2.log("Please fill all fields first!");
  } else {
    flatty1.log("<b>" + document.getElementById('name').value + "</b>" + " is awesome name!");
    flatty1.log("<b>" + document.getElementById('country').value + "</b>" + " is a beautiful place!");
    flatty1.log("Yor name and country: " + "<b>" + document.getElementById('name').value + "</b>" + ", " + "<b>" + document.getElementById('country').value) + "</b>";
    flatty1.log("Thanks for testing this script " + "<b>" + document.getElementById('name').value + "</b>" + "!");
  }
}

html,
body {
  min-height: 100%;
}
.humane,
.humane-flatty {
  position: fixed;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 100000;
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
}
.humane,
.humane-flatty {
  font-family: Helvetica Neue, Helvetica, san-serif;
  font-size: 16px;
  top: 0;
  left: 30%;
  opacity: 0;
  width: 40%;
  color: #444;
  padding: 10px;
  text-align: center;
  background-color: #fff;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-bottom-right-radius: 3px;
  -moz-border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  -moz-transform: translateY(-100px);
  -webkit-transform: translateY(-100px);
  -ms-transform: translateY(-100px);
  -o-transform: translateY(-100px);
  transform: translateY(-100px);
}
.humane p,
.humane-flatty p,
.humane ul,
.humane-flatty ul {
  margin: 0;
  padding: 0;
}
.humane ul,
.humane-flatty ul {
  list-style: none;
}
.humane.humane-flatty-info,
.humane-flatty.humane-flatty-info {
  background-color: #3498db;
  color: #FFF;
}
.humane.humane-flatty-success,
.humane-flatty.humane-flatty-success {
  background-color: #18bc9c;
  color: #FFF;
}
.humane.humane-flatty-error,
.humane-flatty.humane-flatty-error {
  background-color: #e74c3c;
  color: #FFF;
}
.humane-animate,
.humane-flatty.humane-flatty-animate {
  opacity: 1;
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.humane-animate:hover,
.humane-flatty.humane-flatty-animate:hover {
  opacity: 0.7;
}
.humane-js-animate,
.humane-flatty.humane-flatty-js-animate {
  opacity: 1;
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.humane-js-animate:hover,
.humane-flatty.humane-flatty-js-animate:hover {
  opacity: 0.7;
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=70);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/humane-js/3.2.2/humane.min.js"></script>

<a style="color: red;">*</a><a>Fill all fields and press "check" button.</a>
<br>
<input type="textbox" id="name" placeholder="Your name">
<input type="textbox" id="country" placeholder="Your country">
<button onclick="check()" style="background: white; color: black; border: 2px solid black; cursor: pointer;">check</button>

Try to type something in "name" box and leave "country" box empty.

Aᴍɪʀ · Accepted Answer · 2015-12-15 17:50:44Z

2

You can select both fields and test to see whether their value is an empty string or not. If any of them is empty, then show the error.

You can achieve that by using OR operator ||.

function check() {
    if (document.getElementById('name').value == '' || 
        document.getElementById('country').value == '') {
        flatty2.log("Please fill all fields first!");
    } else {
        // the rest of the thing    
    }
}

edited Dec 15, 2015 at 17:50

answered Dec 15, 2015 at 17:45

Aᴍɪʀ

7,8133 gold badges40 silver badges54 bronze badges

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

1 Comment

Aᴍɪʀ Over a year ago

Your welcome :) Please consider marking it as the answer for future visitors if that answers your question.

Ajay Narain Mathur · Accepted Answer · 2015-12-15 18:11:54Z

I see there is an accepted answer. I just want to add this answer saying there is a better way to do validation. OP may add a class to all the fields that need to validated. Then validate those fields. This value for every field new entry is not to be made in if condition.

JS:

var flag = false;
var validateFields = document.getElementsByClassName("validate");
  for (var i = 0; i < validateFields.length; i++) {
    if (validateFields[i].value == '' || validateFields[i].value == undefined) {
      flatty2.log("Please fill all fields first!");
      flag = true;
    }
  }
  if (flag) {
    //success code
}

Fields that need to be validate:

<input type="textbox" id="country" class="validate" placeholder="Your country">

Example Snippet:

var flatty1 = humane.create({
  baseCls: 'humane-flatty',
  addnCls: 'humane-flatty-success',
  timeout: 2500
});
var flatty2 = humane.create({
  baseCls: 'humane-flatty',
  addnCls: 'humane-flatty-error',
  timeout: 2500
});

function check() {
  var flag = false;
  var validateFields = document.getElementsByClassName("validate");
  for (var i = 0; i < validateFields.length; i++) {
    if (validateFields[i].value == '' || validateFields[i].value == undefined) {
      flatty2.log("Please fill all fields first!");
      flag = true;
    }
  }
  if (flag) {
    flatty1.log("<b>" + document.getElementById('name').value + "</b>" + " is awesome name!");
    flatty1.log("<b>" + document.getElementById('country').value + "</b>" + " is a beautiful place!");
    flatty1.log("Yor name and country: " + "<b>" + document.getElementById('name').value + "</b>" + ", " + "<b>" + document.getElementById('country').value) + "</b>";
    flatty1.log("Thanks for testing this script " + "<b>" + document.getElementById('name').value + "</b>" + "!");
  }
}

html,
body {
  min-height: 100%;
}
.humane,
.humane-flatty {
  position: fixed;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 100000;
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
}
.humane,
.humane-flatty {
  font-family: Helvetica Neue, Helvetica, san-serif;
  font-size: 16px;
  top: 0;
  left: 30%;
  opacity: 0;
  width: 40%;
  color: #444;
  padding: 10px;
  text-align: center;
  background-color: #fff;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-bottom-right-radius: 3px;
  -moz-border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  -moz-transform: translateY(-100px);
  -webkit-transform: translateY(-100px);
  -ms-transform: translateY(-100px);
  -o-transform: translateY(-100px);
  transform: translateY(-100px);
}
.humane p,
.humane-flatty p,
.humane ul,
.humane-flatty ul {
  margin: 0;
  padding: 0;
}
.humane ul,
.humane-flatty ul {
  list-style: none;
}
.humane.humane-flatty-info,
.humane-flatty.humane-flatty-info {
  background-color: #3498db;
  color: #FFF;
}
.humane.humane-flatty-success,
.humane-flatty.humane-flatty-success {
  background-color: #18bc9c;
  color: #FFF;
}
.humane.humane-flatty-error,
.humane-flatty.humane-flatty-error {
  background-color: #e74c3c;
  color: #FFF;
}
.humane-animate,
.humane-flatty.humane-flatty-animate {
  opacity: 1;
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.humane-animate:hover,
.humane-flatty.humane-flatty-animate:hover {
  opacity: 0.7;
}
.humane-js-animate,
.humane-flatty.humane-flatty-js-animate {
  opacity: 1;
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.humane-js-animate:hover,
.humane-flatty.humane-flatty-js-animate:hover {
  opacity: 0.7;
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=70);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Password test</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/humane-js/3.2.2/humane.min.js"></script>
</head>

<body>
  <a style="color: red;">*</a><a>Fill all fields and press "check" button.</a>
  <br>
  <input type="textbox" id="name" class="validate" placeholder="Your name">
  <input type="textbox" id="country" class="validate" placeholder="Your country">
  <button onclick="check()" style="background: white; color: black; border: 2px solid black; cursor: pointer;">check</button>
  <script>
  </script>
</body>

</html>

Collectives™ on Stack Overflow

Javascript multiple IDs in "if ()"

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related