Getting the value of an attribute. Vanilla JS-CodePudding

GOAL: I want the valid icon to show when the input has a valid attribute of true. and the invalid icon to show when it's false && the input has a length of 1 or more characters.

(phoneInputs function): in the console, it outputs "incomplete" for every keypress until the length = 10. When it reaches 10 characters, it says good and sets the valid attribute to true.

(formCheck function): adds or removes a .hidden class depending upon the length. (This is the part that isn't working because I'm trying to target the input's valid attribute. The attribute via the inspector seems to be working and functioning perfectly, via the phoneInputs function)

I've tried console.log() the following:

input.target - shows the correct input element.
input.target.valid - undefined
input.target.getAttribute('valid') - returns an error

Any help?

https://codepen.io/gold240sx/pen/wvyqPpP?editors=1111

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://kit.fontawesome.com/1758b3260f.js" crossorigin="anonymous"></script>
  <style>
       .hidden {
          display: none;
       }
  </style>
  <script>
    const formCheck = (input) => {
       const chxVer = input.target.parentElement.querySelector('.bool-form-val')
       const validIco = chxVer.querySelector('.check')
       const invalidIco = chxVer.querySelector('.x')

       if (input.target.getAttribute("valid")==true) {
           validIco.classList.remove('hidden')
           invalidIco.classList.add('hidden')
       } else if (input.target.getAttribute("valid")==false) {
           input.target.setAttribute('valid', false)
           console.log(input.target.valid)
           validIco.classList.add('hidden')
           invalidIco.classList.remove('hidden')
       } else {}
       console.log(input.target.getAttribute("valid"))
   }

   const phoneInputs = document.querySelectorAll('.phone-number');
   phoneInputs.forEach((input) => {

       const boolFormChecks = document.querySelectorAll('.bool-form-val');

       input.addEventListener('keyup', (e) => {
    
           formCheck(e)
           //US numbers only
           if (input.value.length === 10) {
               input.setAttribute('valid', true)
               // console.log(input.target.isValid)
               console.log('phone number good')
               console.log(input.value) //Outputs final phone number
           } else {
              // console.log(input.validity.valid)
              input.setAttribute('valid', false)
              // console.log(input.value.length)
              console.log("incomplete")
           }
       })
    })
  </script>
  <title>Document</title>
</head>
<body>
    <div >
      <input 
         type="text"
         name="phoneNumber" 
         id="signup-phoneNumber" 
         placeholder="Phone Number" 
          
         maxlength="10"
      >
      <div >
        <i ></i>
        <i ></i>
      </div>
  </div>
</body>
</html>

CodePudding user response：

You have two issues:

getAttribute() always returns a string but you compare it with true and this comparison will always be false. You should instead do input.target.getAttribute("valid") == "true".
For the opposite check, you should just do it in the else, there's no need for a input.target.getAttribute("valid") == "false" (which won't work anyway since you never set the value to false).
You do formCheck(e) at the beginning of the keyup listener, before setting the valid attribute in the next lines. That means if you type the 10th character, you check the value of valid, which is still not true, and THEN since it's the 10th character you set it to true.
You should thus do formCheck(e) at the end of the function.

Here's your code with the 2 fixes done:

const formCheck = (input) => {
  const chxVer = input.target.parentElement.querySelector('.bool-form-val')
  const validIco = chxVer.querySelector('.check')
  const invalidIco = chxVer.querySelector('.x')

  if (input.target.getAttribute("valid") == "true") {
    validIco.classList.remove('hidden')
    invalidIco.classList.add('hidden')
  } else {
    input.target.setAttribute('valid', false)
    console.log(input.target.valid)
    validIco.classList.add('hidden')
    invalidIco.classList.remove('hidden')
  }
  console.log(input.target.getAttribute("valid"))
}

const phoneInputs = document.querySelectorAll('.phone-number');
phoneInputs.forEach((input) => {

  const boolFormChecks = document.querySelectorAll('.bool-form-val');

  input.addEventListener('keyup', (e) => {


    //US numbers only
    if (input.value.length === 10) {
      input.setAttribute('valid', true)
      // console.log(input.target.isValid)
      console.log('phone number good')
      console.log(input.value) //Outputs final phone number
    } else {
      // console.log(input.validity.valid)
      input.setAttribute('valid', false)
      // console.log(input.value.length)
      console.log("incomplete")
    }
    formCheck(e)

  })
})

.hidden {
  display: none;
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/1758b3260f.js" crossorigin="anonymous"></script>
  <title>Document</title>
</head>

<body>
  <div >
    <input type="text" name="phoneNumber" id="signup-phoneNumber" placeholder="Phone Number"  maxlength="10">
    <div >
      <i ></i>
      <i ></i>
    </div>
  </div>
</body>

</html>