Question 261102 in Html Question posted in
Some basic documentation can be found here.

Html – I want correct my code and need assistance

Below code says that if all requirements are included in password then after clicking on sign up button page should get redirected to mentioned Href. assist me to correct below code

   

document.querySelector('form').addEventListener('submit', function(event)   {
  const password = document.getElementById('password').value;
  const requirementsList = document.getElementById('password-requirements').getElementsByTagName('li');

  for (let i = 0; i < requirementsList.length; i++)  {      
    requirementsList[i].classList.remove('error');    
  }
  if (password.length < 8) {      
    requirementsList[0].classList.add('error');    
  }
  if (!/[!@#$%^&*]/.test(password))     {      
    requirementsList[1].classList.add('error');    
  } 
  if (!/[0-9]/.test(password))     {      
    requirementsList[2].classList.add('error');    
  }
  if (!/[A-Z]/.test(password))     {      
    requirementsList[3].classList.add('error');    
  } 
  if (!/[a-z]/.test(password))     {      
    requirementsList[4].classList.add('error');    
  }

  let allRequirementsValid = true;
  for (let i = 0; i < requirementsList.length; i++) {       
    if (requirementsList[i].classList.contains('error')) {        
      allRequirementsValid = false;    
    }    
    else {      
      window.location.href = 'https://chat.openai.com/c/0758cb90-cb9d-4dac-9e16-028c59393619';    
    }  
  }  
});

i have tried few step. I am expecting that if all requirements are not included in password. then requirements should get highlighted in red after clicking on sign up button. and if requirements are included the page should get redirected to home page after clicking on sign up button.

Tags:

2

Answers


  1. 0

    Used Array.from() method to convert the requirements list into an array and then used the forEach() method to loop through each element. Think of it like going through each item in a shopping list and checking it off.

    const passwordRequirements = document.getElementById('password-requirements').getElementsByTagName('li');
const passwordInput = document.getElementById('password');
const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const requirementsArray = Array.from(passwordRequirements);

  requirementsArray.forEach((requirement) => {
    requirement.classList.remove('error');
  });

  if (!/(?=.*[!@#$%^&*])(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z]).{8,}/.test(passwordInput.value)) {

    requirementsArray.forEach((requirement) => {
      requirement.classList.add('error');
    });
    return;
  }

  window.location.href = 'https://chat.openai.com/c/0758cb90-cb9d-4dac-9e16-028c59393619';
});

    Let me know if it helps and solves the issue, some changes are made but this made it efficient

    Login or Signup to reply.
  2. 0

    I will suggest that you use the build in validation for controlling if the form should submit or not. And then for giving the user feedback you can listen for the invalid event. To avoid repeating code use a data-* attribute on each list item and use that for validating the test.

    Notice that I use both e.preventDefault() and the useCapture parameter on addEventListener() for stopping the default message box on the invalid event.

    document.forms.signup.addEventListener('invalid', e => {
  e.preventDefault();
  let form = e.target.form;
  switch(e.target.name){
    case 'password':
      let password = e.target.value;
      let requirementsList = form.querySelectorAll('.password-requirements li');
      requirementsList.forEach(elm => {
        let regex = new RegExp(elm.dataset.regex);
        if(!regex.test(password)){
          elm.classList.add('error');
        }else{
          elm.classList.remove('error');
        }
      });
      break;
  }
}, true);

// remove this event listener to let the form submit
document.forms.signup.addEventListener('submit', e => {
  e.preventDfault();
  console.log('Form is submitting...');
});
    ul.password-requirements li {
  display: none;
}

ul.password-requirements li.error {
  display: block;
}
    <form name="signup" action="/signup" method="POST">
  <label>Password:<input type="text" name="password"
  pattern="(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,}" required/></label>
  <ul class="password-requirements">
    <li data-regex=".{8,}">8 characters, or more</li>
    <li data-regex="[!@#$%^&*]">Special characters</li>
    <li data-regex="[0-9]">number</li>
    <li data-regex="[A-Z]">upper case</li>
    <li data-regex="[a-z]">lower case</li>
  </ul>
  <button type="submit">Submit</button>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search