Base Apparel coming soon page built with Vite+React+Tailwindcss

Community feedback

• 

  Denis•1,060

  @Mod8124Posted about 2 years ago

  Hola Buen trabajo!,

  Para este challange es cuando el usuario hace submit, ademas al hacer un message custom hay que hacerlo manual el require del input te verifica cuando lo envias al server directamente pero eso usualmente solo se utiliza en php, en front se utiliza fetch, axios, HttpClient para enviar data al server siempre que algo sea dinamico hay que usar hooks

    const message = ''Please a provide a valid email"
    const [isInvalid, setInvalid] = useState(false);
     const isEmail = ^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$;
  
     const handleSubmit = (event) => {
     event.preventDefault();
  
      const { name } = event.target;
  
      if (name.value.match(isEmail)) {
      event.reset()
     isInvalid(false)
    } else {
     isInvalid(true)
   }
   }
  }
  

  En your jsx agregas condicionales si es isInvalid por ejemplo y agregas el event onSubmit a tu form

     <form onSubmit={handleSubmit}>
       <div>
       <input type="text" name="name" class={isUnvalid ? 'isUnvalid':'isValid'}/>
       // si es invalid el input se activa la clases isUnvalid sino is valid 
  
       {isUnvalid && <img src=".src/img/icon-fail.svg">}
        // se el icon de fail si es invalid 
      </div>
  
      {isUnvalid && <p>{message}</p>}
      // se muestra el mensage
    </form>
  

  En resume el require en el input es una validacion del html, si quiero mensajes distintos hay que hacerlos manual

  Espero te ayude, Good Coding...

  Marked as helpful

  0

  ---

  

  Seb Arz•90

  @websebarzPosted about 2 years ago

  @Mod8124 Denis, esto es lo que le sigue de util! Te agradezco mucho el tiempo que te tomaste para responder. Ya acabo de arreglar la forma para validar el email. Ahora me queda mucho mas claro el concepto. Saludos.

  1