Haaste: Tapahtumakuuntelijoiden Toteuttaminen
Tehtävä
Rakennat lomakkeen, jossa käyttäjät voivat lähettää tietonsa. Tavoitteena on validoida käyttäjän syöte, antaa reaaliaikaista palautetta kirjoittaessa ja estää lomakkeen lähetys, jos syöte on virheellinen.
- Reaaliaikainen syötteen palaute:
- Kuuntele muutoksia käyttäjän kirjoittaessa;
- Tapahtumankäsittelijässä tarkista syötteen arvon pituus;
- Jos pituus on alle 3 merkkiä, aseta
<p>-elementin, jonka ID onfeedback, sisällöksi"Name is too short."; - Jos pituus on 3 merkkiä tai enemmän, aseta
feedback-elementin sisällöksi"Name looks good!".
- Estä oletuslomakkeen lähetys:
- Kuuntele lomakkeen lähetyksiä;
- Estä lomakkeen oletuslähetyskäyttäytyminen;
- Tarkista syötteen arvo;
- Jos pituus on alle 3 merkkiä, näytä
"Please enter a longer name"<p>-elementissä, jonka ID onform-message; - Jos pituus on 3 merkkiä tai enemmän, näytä
"Form submitted successfully!"form-message-elementissä.
index.html
index.css
index.js
- Käytä
input-tapahtumaa kuunnellaksesi muutoksia käyttäjän kirjoittaessa; - Käytä
event.target.value.length < 3tarkistaaksesi syötteen arvon pituuden; - Käytä
submit-tapahtumaa lomakkeen lähetyksen kuunteluun; - Käytä
event.preventDefault()estääksesi lomakkeen oletuslähetyskäyttäytymisen; - Käytä
nameInput.value.length < 3tarkistaaksesi syötteen arvon.
index.html
index.css
index.js
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you show me how to set up the HTML form and input elements?
What would the JavaScript code look like for this validation?
Can you explain how to connect the feedback messages to the input and form events?
Awesome!
Completion rate improved to 2.22
Haaste: Tapahtumakuuntelijoiden Toteuttaminen
Pyyhkäise näyttääksesi valikon
Tehtävä
Rakennat lomakkeen, jossa käyttäjät voivat lähettää tietonsa. Tavoitteena on validoida käyttäjän syöte, antaa reaaliaikaista palautetta kirjoittaessa ja estää lomakkeen lähetys, jos syöte on virheellinen.
- Reaaliaikainen syötteen palaute:
- Kuuntele muutoksia käyttäjän kirjoittaessa;
- Tapahtumankäsittelijässä tarkista syötteen arvon pituus;
- Jos pituus on alle 3 merkkiä, aseta
<p>-elementin, jonka ID onfeedback, sisällöksi"Name is too short."; - Jos pituus on 3 merkkiä tai enemmän, aseta
feedback-elementin sisällöksi"Name looks good!".
- Estä oletuslomakkeen lähetys:
- Kuuntele lomakkeen lähetyksiä;
- Estä lomakkeen oletuslähetyskäyttäytyminen;
- Tarkista syötteen arvo;
- Jos pituus on alle 3 merkkiä, näytä
"Please enter a longer name"<p>-elementissä, jonka ID onform-message; - Jos pituus on 3 merkkiä tai enemmän, näytä
"Form submitted successfully!"form-message-elementissä.
index.html
index.css
index.js
- Käytä
input-tapahtumaa kuunnellaksesi muutoksia käyttäjän kirjoittaessa; - Käytä
event.target.value.length < 3tarkistaaksesi syötteen arvon pituuden; - Käytä
submit-tapahtumaa lomakkeen lähetyksen kuunteluun; - Käytä
event.preventDefault()estääksesi lomakkeen oletuslähetyskäyttäytymisen; - Käytä
nameInput.value.length < 3tarkistaaksesi syötteen arvon.
index.html
index.css
index.js
Kiitos palautteestasi!