Day31 #100DaysOfCode

Favour George
Sep 8, 2018 · 1 min read

Ideas they say rule the world…

This week I set out to understand form validation with regards to React’s controlled inputs style. I had to setup a basic HTML, CSS and JS file to achieve that and am only sharing the javascript code.

React Style Form validation for vanilla JS

The form validates beautifully. I learnt a new way to clear input fields

const resetForm = () => {
// Convert htmlCollection to an array
const form = [...document.querySelector("form")];

form.forEach(el => {
if (el.nodeName.toLowerCase() === "input") {
el.value = "";
}
});
};

The next task is to make the errors show up in the UI.

How was I able to know which form field to update while the user fills the form?

Eazi, Ugwuanyi Chidera, Happy weekend friends. Salute to CCS chibueze ukaegbu

Favour George

Building solutions through software and technology

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade