Search for a command to run...
I am a developer from India with a good eye for frontend logic and design. I am also well acquainted with the backend and business logic so that's add to my ability to create a good frontend while making it easily integratable with backend.
No comments yet. Be the first to comment.
In this series, you will be learning about everything i have to offer in Reactjs, from your first Hello World to large Scalable websites.
From ~7MB to ~ 700kbs
Understanding and Reading the MNIST Dataset
In the digital age, where data breaches are as common as coffee spills, one cryptographic algorithm stands out for its robustness in securing our passwords: bcrypt. Let's dive into the world of bcrypt hashing, uncovering its mechanics, the role of sa...
In our daily used language, we use Grammar, similarly, in computer language, we have a set of rules called grammar on which a language is defined. In this article, we will look into what those Grammars are and how we define and use them. Exploring th...
Introduction In the vast landscape of computer science, languages are not just confined to human communication; they also extend into the realm of formal languages, classified into regular and non-regular categories. Understanding these languages is ...
Hello Guys, welcome back to my blog. Today we will be creating our small server and React app to learn about Server-Sent Events and how to handle them in a React App. But before we even start building anything let's learn about Server-Side Events (SS...
Guys, I read this amazing tweet today and this blew my mind 🤯, I am not sure if this is the optimal way to do this but I just felt to document this.
Here is the original tweet 👇
I am just gonna get ahead and create a simple form, the basic barebone and structure using JSX
import "./styles.css";
export default function App() {
return (
<div className="App">
<form className="form" onSubmit={handleSubmit}>
<div>
<label for="firstName"> First name : </label>
<input
id="firstName"
name="firstName"
type="text"
placeholder="John"
/>
</div>
<div>
<label for="lastName"> last name : </label>
<input name="lastName" type="text" placeholder="Doe" />
</div>
<div>
<label htmlFor="email"> email : </label>
<input
id="email"
name="email"
type="email"
placeholder="john@email.com"
/>
</div>
<div>
<label for="password"> Password : </label>
<input name="password" type="password" placeholder="********" />
</div>
<div>
<label for="confirm password"> Confirm Password : </label>
<input
name="confirmPassword"
type="password"
placeholder="********"
/>
</div>
<button>Submit</button>
</form>
</div>
);
}
Preview :
Once this is done your basic non-styled form will look something like this and all you need is to get the user data from the From.
let's create a handle submit function now, if you know react this will be very easy for you but here it goes.
const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const data = Object.fromEntries(formData);
console.log(data);
};
so what is happening here is we are getting the form element and creating a new Form Data once that is done we are converting it into Objects using the javascript method Object.fromEntries(formData)
Once that is done let's test our App so far.
npm i zod
// or
yarn add zod
once Zod is installed let's define our schema for the form inputs and then we will try to validate it. In my use case, we will be adding only for firstName, lastName, email, password and confirmPassword.
const validateSchema = z
.object({
firstName: z.string().min(3),
lastName: z.string(),
email: z.string().email(),
password: z.string().min(6),
confirmPassword: z.string().min(6)
})
.refine((data) => data.password === data.confirmPassword, {
message: "Password doesn't match",
path: ["confirmpassword"]
});
this is a schema on that basis we will be validating our form like below and our new handle submit will look something like this. Now you can add different validation and show the user error message and handle logic of what to do after submitting.
const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const data = Object.fromEntries(formData);
try {
const validatedForm = validateSchema.parse(data);
console.log(validatedForm);
} catch (err) {
console.log(err);
}
// console.log(data);
};
Try this out :P