Sunday

Changing multiple text with the same class with one button

Issue

So I want a text to show up under every input field(don't mind the 'iii', it's a dummy text) when it's empty. I have no idea why it's not working. I could do that by having every text as a different class but the code would look terrible. When I click a button, nothing happens. I know it's something simple but I can't pin point what it is. Thanks in advance for help.

const wrongDisplay = document.querySelectorAll('.wrongInfo');
const formData = document.querySelector('.formData');
const formInput = document.querySelectorAll('.formInput')
const firstPassword = document.querySelector('#firstPassword')
  const passwordConfirm = document.querySelector('#passwordConfirm')
const submitButton = document.querySelector('.submitButton')

submitButton.addEventListener('click', () => {
  formInput.forEach(el => {
       if(el.value === '') {
            wrongDisplay.textContent = 'required field'
       }
  });
});

<!DOCTYPE html>
<html lang="en">
    <head>
<meta charset="UTF-8">
<title> ol jeaa</title>
<link rel="stylesheet" href="./styles/style.css">
<body>

<!--Image on the left side of the page-->
<div class="leftSidePhotoContainer">
    <img src="./images/pexels-marvin-machler-11127092.jpg">
</div>

<!--Main text on the page-->
<div class="rightSide">
    <main class="mainText">
     
        <p>
          Start your online business journey today!
          All you have to do is sign up and post offers of items you want to sell!
    </main>


    <!-- Signup container -->
    <form action="#" method="get" class="formData">
    <fieldset class="formContainer">
      <div class="firstColumn">
        <span>Let's do this!</span>

      <div class="firstNameCont">
        <label for="FirstName" class="labelForm" >First Name</label>
        <input type="text" id="FirstName" name="FirstName" class="formInput" required>
        <span class="wrongInfo">iiii</span>
      </div>

      <div class="emailCont">
        <label for="email" class="labelForm" >Email</label>
        <input type="email" id="email" name="email" class="formInput" id="emailInvalid" required>
        <span class="wrongInfo">iiii</span>
      </div>

      <div class="passwordCont">
        <label for="password" class="labelForm">Password</label>
        <input type="password" id="firstPassword" name="password" class="formInput" required >
        <span class="wrongInfo">iiii</span>
      </div>
    </div>


      <div class="secondColumn">
        <span>Let's do this!</span>

      <div class="LastNameCont">
        <label for="LastName" class="labelForm">Last Name</label>
        <input type="text" id="LastName" name="LastName" class="formInput" required>
        <span class="wrongInfo">iiii</span>
      </div>

      <div class="phoneNumberCont">
        <label for="phoneNumber" class="labelForm">Phone Number</label>
        <input type="tel" id="phoneNumber" name="phoneNumber" class="formInput" required>
        <span class="wrongInfo">iiii</span>
      </div>
      
      <div class="passwordConfirmCont">
        <label for="passwordConfirm" class="labelForm">Confirm Password</label>
        <input type="password" id="passwordConfirm" name="passwordConfirm" class="formInput" required >
        <span class="wrongInfo">iiii</span>
      </div>
    </div>
    </fieldset>
    <div class="buttonContainer">
<button type="submit" class="submitButton">Create account</button>
</div>
</form>
  <script src="./scripts/script.js"></script>
</body>
    </head>
</html>

Solution

A few things to fix:

add novalidate attribute in form to prevent native HTML5 validation
add e.preventDefault() in click() handler to prevent form submission without validation
you were trying to set textContent to document.querySelectorAll('.wrongInfo'); as if it was a single element like document.querySelector('.wrongInfo');
you can use el.nextElementSibling instead, and you need to check if value is empty or not to remove "required field" when input has value after being invalid
your HTML isn't correct, fixed for you

const formInput = document.querySelectorAll('.formInput')
const submitButton = document.querySelector('.submitButton')

submitButton.addEventListener('click', e => {
  e.preventDefault();
  formInput.forEach(el => el.nextElementSibling.textContent = el.value === '' ? 'required field' : '');
});

<!--Image on the left side of the page-->
<div class="leftSidePhotoContainer">
  <img src="./images/pexels-marvin-machler-11127092.jpg" />
</div>

<!--Main text on the page-->
<div class="rightSide">
  <main class="mainText">
    <p>
      Start your online business journey today! All you have to do is sign up
      and post offers of items you want to sell!
    </p>

    <!-- Signup container -->
    <form action="#" method="post" class="formData" novalidate>
      <fieldset class="formContainer">
        <div class="firstColumn">
          <span>Let's do this!</span>

          <div class="firstNameCont">
            <label for="FirstName" class="labelForm">First Name</label>
            <input
              type="text"
              id="FirstName"
              name="FirstName"
              class="formInput"
              required
            />
            <span class="wrongInfo">iiii</span>
          </div>

          <div class="emailCont">
            <label for="email" class="labelForm">Email</label>
            <input
              type="id"
              ="email"
              id="email"
              name="email"
              class="formInput"
              required
            />
            <span class="wrongInfo">iiii</span>
          </div>

          <div class="passwordCont">
            <label for="password" class="labelForm">Password</label>
            <input
              type="password"
              id="firstPassword"
              name="password"
              class="formInput"
              required
            />
            <span class="wrongInfo">iiii</span>
          </div>
        </div>
        <div class="secondColumn">
          <span>Let's do this!</span>

          <div class="LastNameCont">
            <label for="LastName" class="labelForm">Last Name</label>
            <input
              type="text"
              id="LastName"
              name="LastName"
              class="formInput"
              required
            />
            <span class="wrongInfo">iiii</span>
          </div>
          <div class="phoneNumberCont">
            <label for="phoneNumber" class="labelForm">Phone Number</label>
            <input
              type="tel"
              id="phoneNumber"
              name="phoneNumber"
              class="formInput"
              required
            />
            <span class="wrongInfo">iiii</span>
          </div>
          <div class="passwordConfirmCont">
            <label for="passwordConfirm" class="labelForm"
              >Confirm Password</label
            >
            <input
              type="password"
              id="passwordConfirm"
              name="passwordConfirm"
              class="formInput"
              required
            />
            <span class="wrongInfo">iiii</span>
          </div>
        </div>
      </fieldset>
      <div class="buttonContainer">
        <button type="submit" class="submitButton">Create account</button>
      </div>
    </form>
  </main>
</div>

Answered By - dippas

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Sunday

Changing multiple text with the same class with one button

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels