Apply for Zend Framework Certification Training

ReactJs



< First Getting Started With CodeIgniter URL Routing >



Step 1 Create a state for Error message 
const [form_message, setform_message]=useState('')
Step 2 Add a place in a form to display Error message of form elements
  <div class="form_message">{form_message}</div>
 
Step 3  Add a code to validate in handleSubmit function
 
const handleSubmit = (e)=>{
        e.preventDefault()
        console.log(firstname,lastname)
        if(firstname ==""){
            setform_message("Enter your first name")
        }else if(lastname ==""){
            setform_message("Enter your Last name")
        }else if(mobileno ==""){
            setform_message("Enter your Mobile no")
        }else if(email ==""){
            setform_message("Enter your Email id")
        }else if(password ==""){
            setform_message("Enter your Passsword")
        }
    }
 
Step 4 Final code for registration.jsx
 
import { useEffect, useState } from 'react'
import '../css/registration.css'
import { useLocation, useNavigate } from 'react-router-dom';
const Registration = ()=>{
    const [firstname, setfirstname] = useState('');
    const [lastname, setlastname] = useState('');
    const [mobileno, setmobileno] = useState('');
    const [email, setemail] = useState('');
    const [password, setpassword] = useState('');
    const [form_title, setform_title] = useState('')
    const [button_name, setbutton_name]= useState('')
    const [form_link,setform_link] = useState('')
    const [naviage_link, setnaviage_link]= useState('')
    const [form_message, setform_message]=useState('')
    const location = useLocation();
    const navigate = useNavigate();
    useEffect(()=>{
        if(location.pathname.split('/')[1] == 'login'){
            setform_title('Login form')
            setbutton_name('Login')
            setform_link('New User')
            setnaviage_link('registration')
        }
        if(location.pathname.split('/')[1] == 'registration'){
            setform_title('Registration form')
            setbutton_name('Registration')
            setform_link('Already an user')
            setnaviage_link('login')
        }
    },[])
    const handleFirstname = (e)=>{
        setfirstname(e.target.value)  
    }
    const handleLastname = (e)=>{
        setlastname(e.target.value)
    }
    const handleMobileno = (e)=>{
        setmobileno(e.target.value)
    }
    const handleEmail = (e)=>{
        setemail(e.target.value)
    }
    const handlePassword = (e)=>{
        setpassword(e.target.value)
    }
    const handleSubmit = (e)=>{
        e.preventDefault()
        console.log(firstname,lastname)
        if(firstname ==""){
            setform_message("Enter your first name")
        }else if(lastname ==""){
            setform_message("Enter your Last name")
        }else if(mobileno ==""){
            setform_message("Enter your Mobile no")
        }else if(email ==""){
            setform_message("Enter your Email id")
        }else if(password ==""){
            setform_message("Enter your Passsword")
        }
    }
    return(
        <> 
        <div id="form-top-container">
        <div id="form-container">
            <div class="header-form">{form_title} </div>
            <div class="form_message">{form_message}</div>
            <form class="form">
    {button_name == 'Registration'&& 
        <>
            <div class="input-box">
                <label for="firstname">First name </label>
                <input type="text" placeholder="First name" value={firstname} onChange={handleFirstname}/>
            </div>
            <div class="input-box">
                <label for="lastname">Last name </label>
                <input type="text" placeholder="Last name" value={lastname} onChange={handleLastname}/>
            </div>
            <div class="input-box">
                <label for="mobileno">Mobile no </label>
                <input type="text" placeholder="Mobile no" value={mobileno} onChange={handleMobileno}/>
            </div>
            </>
        }
            <div class="input-box">
                <label for="email">Email </label>
                <input type="text" placeholder="Email" value={email} onChange={handleEmail}/>
            </div>
            <div class="input-box">
                <label for="password">Password</label>
                <input type="text" placeholder="Password" value={password} onChange={handlePassword}/>
            </div>
            
            <input type="submit" value={button_name} onClick={handleSubmit}/>
            </form>
            {form_link} <a class="naviage_link" onClick={()=>{navigate(`/${naviage_link}`)}}>Click here</a>
         </div>
        </div>
 
        
        </>
    )
} 
export default Registration

< First Getting Started With CodeIgniter URL Routing >



Ask a question



  • Question: 
    {{questionlistdata.blog_question_description}}
    • Answer:
      {{answer.blog_answer_description  }}
    Replay to Question

(+91)-9910699802
Become A Member     Become A Teacher
Back to Top