CODEWITHSUNDEEP
javascripthtml
NiKoLaPrO
NiKoLaPrO

Reputation: 624

Javascript multiple IDs in "if ()"

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.

Upvotes: 1

Views: 836

Answers (2)

Ajay Narain Mathur
Ajay Narain Mathur

Reputation: 5466

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>

Upvotes: 1

Aᴍɪʀ
Aᴍɪʀ

Reputation: 7803

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    
    }
}

Upvotes: 2

Related Questions