Kuinka käyttää Reaktin ohjaamia syötteitä välittömään lomakekentän validointiin

Ohjatut tulot mahdollistavat yksinkertaiset asiat, kuten Poista-painikkeen käytöstä poistamisen, kun jotkut kentät puuttuvat tai ovat virheellisiä.

Mutta emme tietenkään pysähdy sinne.

Vaikka käytöstä poistettu painike on mukava, käyttäjä ei ehkä tiedä miksi hän ei voi napsauttaa tätä painiketta. He eivät ehkä tiedä minkä virheen he tekivät sen käytöstä tai edes mikä kenttä aiheuttaa sen.

Ja se ei ole hieno. Meidän on ehdottomasti korjattava tämä.

Ohjattujen tulojen perusteet

Hallittujen tulojen käyttäminen tarkoittaa, että tallennamme kaikki tuloarvot tilassamme. Voimme sitten arvioida tietyn tilan jokaisella arvomuutoksella ja tehdä jotain sen perusteella. Aikaisemmin kaikki, mitä teimme, oli painikkeen poistaminen käytöstä.

Käytimme yksinkertaista lauseketta laskeaksesi, pitäisikö painike poistaa käytöstä (esimerkiksi kun joko sähköposti- tai salasanakenttä oli tyhjä):

const {sähköposti, salasana} = this.state;
const isEnabled =
  email.length> 0 &&
  salasanan pituus> 0;
 Rekisteröidy 

Se sai työn päätökseen. Huonojen panosten merkitsemiseksi meidän on esitettävä itsellemme pari kysymystä.

Kuinka virheet näytetään?

Tämä on tärkeä kysymys itsellesi, koska erilaiset vaatimukset saattavat edellyttää erilaista virheiden esittämistä.

Syöttövirheiden näyttämiseksi on monia tapoja. Voit esimerkiksi:

  • Näytä
  • Merkitse tulot punaisiksi, jotka sisältävät huonoja tietoja
  • Näytä virheet aivan vastaavien tulojen vieressä
  • Näytä virheluettelo lomakkeen yläosassa
  • Mikä tahansa yhdistelmä yllä olevia tai jotain muuta!

Kumpaa sinun tulisi käyttää? No, kyse on kaikesta kokemuksesta, jonka haluat tarjota. Valitse mitä haluat.

Tätä viestiä varten aion käyttää yksinkertaista - merkitä huonot sisääntulot punaisiksi ilman mitään muuta.

Kuinka virheet esitetään?

Tapa, jolla haluat näyttää virheitä, vaikuttaa siihen, kuinka voit edustaa niitä.

Jotta voidaan ilmoittaa, onko tietty syöte kelvollinen, ilman mitään lisätietoja siitä, miksi se voi olla virheellinen, riittää jokin tällainen:

virheet: {
  nimi: väärä,
  sähköposti: totta,
}

väärä tarkoittaa, ettei virheitä ole tai täysin kelvollinen; true tarkoittaa, että kenttä on virheellinen.

Jos päätämme tulevaisuudessa tallentaa syy jotain virheellistä, voimme korvata tosi / epätosi merkkijonolla, joka sisältää virheilmoituksen.

Mutta miten tämä virheobjekti luodaan?

Nyt kun tiedämme kuinka haluamme näyttää virheet JA osaamme edustaa niitä, puuttuu jotain tärkeätä.

Kuinka oikein luoda virheitä.

Tai toisin sanoen: miten otamme olemassa olevat tulot, validoimme ne ja saamme tarvitsemme virhekohteen?

Tarvitsemme siihen validointitoiminnon. Se hyväksyy kenttien nykyiset arvot ja palauttaa virheobjektin meille.

Jatkamme ilmoittautumislomakkeen esimerkkiä. Muista, että meillä oli tämä:

const {sähköposti, salasana} = this.state;
const isEnabled =
  email.length> 0 &&
  salasanan pituus> 0;

Voimme itse asiassa muuttaa tämän logiikan osan validointitoiminnoksi, joka:

  • Onko sähköposti: totta, jos sähköposti on tyhjä, ja
  • Onko salasana: totta, jos salasana on tyhjä
toiminnon vahvistaminen (sähköposti, salasana) {
  // tosi tarkoittaa virheellistä, joten olosuhteemme kääntyivät päinvastaiseksi
  palauta {
    sähköposti: email.length === 0,
    salasana: salasanan pituus === 0,
  };
}

Jäljellä oleva pala

Palapelistä on jäljellä yksi pala.

Meillä on validointitoiminto ja tiedämme kuinka haluamme näyttää virheitä. Meillä on myös muoto.

Nyt on aika kytkeä pisteet.

Vaihe 1: Suorita validoija renderöinnissä.

Validointitoiminnolla ei ole mitään hyötyä, jos emme koskaan kutsu sitä. Haluamme vahvistaa syötteet joka kerta (kyllä, joka kerta) muoto palautetaan - kenties syötteessä on ehkä uusi merkki.

const -virheet = validoi (tämä.valtio.posti, tämä.valtio.salasana);

Vaihe 2: Poista painike käytöstä.

Tämä on yksinkertainen. Painike on poistettava käytöstä, jos virheitä on (ts. Jos jokin virhearvoista on totta).

const isEnabled =! Object.keys (virheet) .jotkut (x => virheet [x]);

Vaihe 3: Merkitse tulot virheellisiksi.

Tämä voi olla mikä tahansa. Meidän tapauksessamme riittää virheluokan lisääminen huonoihin tuloihin.

Voimme lisätä myös yksinkertaisen CSS-säännön:

.virhe {reuna: 1px kiinteä punainen; }

Yksi asia vielä

Jos katsot yllä olevaa JS-laatikkoa, saatat huomata jotain outoa. Kentät on merkitty oletuksena punaisiksi, koska tyhjät kentät ovat virheellisiä.

Mutta emme koskaan edes antaneet käyttäjälle mahdollisuutta kirjoittaa ensin! Myös kentät ovat punaisia, kun ne tarkennetaan ensimmäistä kertaa.

Tämä ei ole hienoa UX: lle.

Korjaamme tämän lisäämällä virheluokan, jos kenttä oli tarkennettu ainakin kerran, mutta on sittemmin hämärtynyt. Tämä varmistaa, että kun käyttäjä keskittyy ensimmäistä kertaa kenttään, virhe ei tule näkyviin heti. Sen sijaan se aukeaa vasta, kun kenttä on epäselvä. Seuraavissa tarkennuksissa virhe kuitenkin ilmenee.

Tämä on helppo saavuttaa käyttämällä onBlur-tapahtumaa ja tilaa seurataksesi epäselvää.

luokan SignUpForm laajentaa React.Component {
  rakentaja () {
    Super ();
    tämä.valtio = {
      sähköposti: '',
      Salasana: '',
      kosketti: {
        sähköposti: väärä,
        salasana: väärä,
      },
    };
  }
  // ...
  handleBlur = (kenttä) => (evt) => {
    this.setState ({
      kosketti: {... tätä.valtiota kosketettu, [kenttä]: totta},
    });
  }
  tehdä ()
    const shouldMarkError = (kenttä) => {
      const hasError = virheet [kenttä];
      const shouldShow = this.state.touched [kenttä];
      palauttaako virhe? pitäisiShow: false;
    };
    // ...
    
      type = "text"
      paikkamerkki = "Kirjoita sähköposti"
      arvo = {this.state.email}
      OnChange = {this.handleEmailChange}
    />
  }
}

Ei niin kova, eikö niin?

Viimeinen kosketus

Huomaa, että shouldMarkError vaikuttaa vain kentän esitykseen. Lähetä-painikkeen tila riippuu silti vain validointivirheistä.

Haluatko lisätä mukavan loppusilauksen? Voit pakottaa virheiden näyttämisen kaikissa kentissä riippumatta siitä, ovatko ne olleet tarkennuksessa, kun käyttäjä siirtää hiiren osoittimen tai napsauttaa estettyä lähetyspainiketta. Mene nyt kokeilemaan sitä itse.

Julkaisin tämän alun perin blogissani osoitteessa goshakkk.name

Jos kaivaa tätä, anna minulle jonkin verran clapsia ja tutustu sarjaani lomakkeiden käsittelemiseen Reaktin kanssa. Voit myös tilata saadaksesi uusia viestejä suoraan postilaatikkoosi.