Base apparel coming soon with TypeScript

Community feedback

• 

  Denis•1,060

  @Mod8124Posted over 2 years ago

  Hi, Good job!

  First, the input has to be in default mode without the border red and, the icon error has to be in display none or visibility: hidden then create a class called active this is going to appear if the input isn't valid

  .form__error {
  display:none;
  }
  
  .form__input {
  border-color:pink;
  }
  
  .active.form__error {
  display:block;
  }
  
  .active.form__input {
     border-color: red;
  }
  

  then in your file js, you add an event to your input to check is valid or invalid

  
    const form__input = document.querySelector('.form__input');
    const form__error = document.querySelector('.form__error');
    const REGEXEMAIL = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  
    form__input.addEventListener( 'input', (event)=>{
  
         if (e.target.value.match(REGEXEMAIL) ) {
        e.target.classList.add('active');
        form__error.classList.add('active');
    } else {
        e.target.classList.remove('active');
       form__error.classList.add('active');
    }
  
  });
  
  

  By the way, sometimes the border doesn't appear so we have to use an Outline-properties

  Marked as helpful

  1

  ---

  

  Rizky Ardiansyah•160

  @arudiansahaPosted over 2 years ago

  @Mod8124 thanks for the help, now is working without problem :)

  1