Validation in Form with React js and Firebase - reactjs

Question

import React, { useState, useEffect } from "react";
import {db} from './firebase'
//I want to add some validation which perform task as follows
//1. Check user enter username less then 40 words
//2. Check user enter email (it need to check basic email information like # symbol)
//3. Check Message should not be exceed then 400 words ,
// All filed must be filled .
const Contact = () => {
const [senderName,setSenderName] = useState("");
const [senderEmail,setSenderEmail] = useState("");
const [senderMessage,setSenderMessage] = useState("");
const handleSubmitForm = (e) => {
e.preventDefault();
db.collection('Contact_Form').add({
User_name:senderName,
User_email:senderEmail,
User_message:senderMessage
})
.then(()=>{
alert("Message submitted")
})
.catch((error) => {
alert(error.message);
});
setSenderName("");
setSenderEmail("");
setSenderMessage("");
};
return(
<>
<div className="contact_us_body">
<div className="contact_us_container">
<div className="contact_us_content">
<div className="contact_us_right_side">
<div className="text_heading">Send us a message</div>
<form className="form" onSubmit={handleSubmitForm} >
<div className="contact_us_input_box">
<input type="text" placeholder="Enter your name" value={senderName}
onChange = {(e) => setSenderName(e.target.value)} />
</div>
<div className="contact_us_input_box">
<input type="text" placeholder="Enter your email"value={senderEmail}
onChange={(e) => setSenderEmail(e.target.value)} />
</div>
<div className="contact_us_input_box message-box">
<textarea name="messageText" id="" cols="30" rows="10"
placeholder="Type your Message"value={senderMessage}
onChange={(e) => setSenderMessage(e.target.value)} >
</textarea>
</div>
<div className="contact_us_button">
<input type="submit" value="Send Now" />
</div>
</form>
</div>
</div>
</div>
</div>
</>
)
}
export default Contact;

Answer 1

For Authenticating the Range of characters in username
function stringlength(inputtxt, maxlength)
{
var field = inputtxt.value;
var mxlen = maxlength;
if(field.length> mxlen)
{
alert("Please input the userid between " +mnlen+ " and " +mxlen+ " characters");
return false;
}
}
If you are using Firebase than you can use firebase Authentication for the login and it will take care of the email formatting-
first of all, define 2 additional useState to show the errors,
const [emailError, setEmailError] = useState('');
const handleLogin = () => {
db
.auth()
.signInWithEmail(email)
.catch((err) =>{
switch (err.code){
case "auth/invalid-email":
// console.log(err)
setEmailError(err.message);
break;
}
})
}
For Limiting the Characters in the tag, use the following attribute
<textarea maxlength="400">