CODEWITHSUNDEEP
javascript
Udzzzz
Udzzzz

Reputation: 155

Validation error on the label text and input border

Using Javascript, I have input validation, when it's empty and click outside the input, it shows an error or red color on the border and label input. I know when we use query selector all, we need to create loops, in my case, the input validation works, it shows red border, however, the label input only shows once, only on the first name.

I tried to add query selector all on the textInput variable, but doesn't seem to work as well, please advice.

const userInput = document.querySelectorAll(".inputJs");

      userInput.forEach(function(evt) {
        evt.onblur = function() {
          const textInput = document.querySelector(".guestlist-form-label");

          if (evt.value === "") {
            evt.classList.add("has-error");
            textInput.classList.add("has-error");
          } else {
            evt.classList.remove("has-error");
            textInput.classList.remove("has-error");
          }
        };
      });
.guestlist-form-label.has-error {
  color: red;
}

.inputJs.has-error {
  border: 1px solid red;
}

.guestlist-form-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 62%;
}

.guestlist-form-wrapper-input {
  display: flex;
  flex-direction: column;
  width: 48%;
  margin-top: 25px;
}

.guestlist-form-wrapper-input label {
  color: #9b9b9b;
  font-size: 14px;
  margin-bottom: 5px;
}

.guestlist-form-wrapper-input input {
  background-color: transparent;
  border: 1px solid #9b9b9b;
  padding: 10px;
  color: #000;
}

.guestlist-form-wrapper-input input:focus {
  outline: none;
  border: 1px solid #4990e2;
  -webkit-box-shadow: 0 0 10px 0 rgba(73, 144, 226, 0.2);
  box-shadow: 0 0 10px 0 rgba(73, 144, 226, 0.4);
}
 <form id="app" class="guestlist-form-wrapper">
        <div class="guestlist-form-wrapper-input">
          <label class="guestlist-form-label">First Name *</label>
          <input type="text" class="inputJs">
        </div>
        <div class="guestlist-form-wrapper-input">
          <label class="guestlist-form-label">Last Name *</label>
          <input type="text" class="inputJs">
        </div>
        <div class="guestlist-form-wrapper-input">
          <label class="guestlist-form-label">Email *</label>
          <input type="email" class="inputJs">
        </div>
        <div class="guestlist-form-wrapper-input">
          <label class="guestlist-form-label">Phone *</label>
          <input type="tel" class="inputJs">
        </div>

      </form>

Upvotes: 1

Views: 453

Answers (1)

Pete
Pete

Reputation: 58432

If your always going to have the same number of labels as inputs, you can get all labels using the query selector all and then use the index in the foreach to add a class to the corresponding label:

const userInput = document.querySelectorAll(".inputJs");
const label = document.querySelectorAll(".guestlist-form-label");

userInput.forEach(function(evt, index) {
  evt.onblur = function() {
    const textInput = label[index];
    textInput.classList.remove("is-focused");

    if (evt.value === "") {
      evt.classList.add("has-error");
      textInput.classList.add("has-error");
    } else {
      evt.classList.remove("has-error");
      textInput.classList.remove("has-error");
    }
  };
  
  evt.onfocus = function() {
    const textInput = label[index];

    if (evt.value === "") {
      textInput.classList.add("is-focused");
    }
  };
});
.guestlist-form-label.has-error {
  color: red;
}

.guestlist-form-label.is-focused {
  color: blue;
}

.inputJs.has-error {
  border: 1px solid red;
}

.guestlist-form-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 62%;
}

.guestlist-form-wrapper-input {
  display: flex;
  flex-direction: column;
  width: 48%;
  margin-top: 25px;
}

.guestlist-form-wrapper-input label {
  color: #9b9b9b;
  font-size: 14px;
  margin-bottom: 5px;
}

.guestlist-form-wrapper-input input {
  background-color: transparent;
  border: 1px solid #9b9b9b;
  padding: 10px;
  color: #000;
}

.guestlist-form-wrapper-input input:focus {
  outline: none;
  border: 1px solid #4990e2;
  -webkit-box-shadow: 0 0 10px 0 rgba(73, 144, 226, 0.2);
  box-shadow: 0 0 10px 0 rgba(73, 144, 226, 0.4);
}
<form id="app" class="guestlist-form-wrapper">
  <div class="guestlist-form-wrapper-input">
    <label class="guestlist-form-label">First Name *</label>
    <input type="text" class="inputJs">
  </div>
  <div class="guestlist-form-wrapper-input">
    <label class="guestlist-form-label">Last Name *</label>
    <input type="text" class="inputJs">
  </div>
  <div class="guestlist-form-wrapper-input">
    <label class="guestlist-form-label">Email *</label>
    <input type="email" class="inputJs">
  </div>
  <div class="guestlist-form-wrapper-input">
    <label class="guestlist-form-label">Phone *</label>
    <input type="tel" class="inputJs">
  </div>

</form>

Upvotes: 1

Related Questions