Here I built a form and I want, when I click on submit button
if title part(input with id form-title) is empty border of the input gets a specific className but
It doesn’t work
I uploaded an image and specify the submit button and input of title
My purpose is when I click on submit button the code must check the inside of the input tag(title) and if it’s empty(I mean equal to “” ) the border of the input become red else become green
import { useState } from "react"; import "./tickets.css"; export default function Tickets() { // States const [toggle_new_ticket, setToggle_new_ticket] = useState(false); const [form_title, set_form_title] = useState(""); const [form_unit, set_form_unit] = useState(""); const [form_explain, set_form_explain] = useState(false); let [check, setCheck] = useState(""); // States functions const form_checker = () => { setCheck(() => { if (form_title == "") { check = false; } else { check = true; } console.log(check); }); }; return ( <div className="tickets-container"> {/* New Ticket section */} <div className="tickets-new-ticket-container"> {/* New Ticket Title */} <div className="tickets-new-ticket-title" onClick={(e) => { setToggle_new_ticket(!toggle_new_ticket); }} > <div className="new-ticket-image"> <img src="https://img.icons8.com/external-tanah-basah-glyph-tanah-basah/48/000000/external-plus-user-interface-tanah-basah-glyph-tanah-basah-2.png" /> </div> <div className="new-ticket-title"> <sapn> ثبت درخواست جدید</sapn> </div> </div> {/* New Ticket Form */} {toggle_new_ticket ? ( <div className="tickets-new-ticket-form-container"> {/* Form top container */} <div className="tickets-new-ticket-form-top-container"> {/* Form title part */} <div className="new-ticket-form-title"> <label htmlFor="form-title">عنوان</label> <input onChange={(e) => { set_form_title(e.target.value); }} className={check ? "form-correct" : "form-alarm"} type="text" name="form-title" id="form-title" required value={form_title} title="عنوان مورد نظرتان را وارد کنید" {...console.log(check)} /> <span>current state of title:{}</span> </div> {/* Form unit part */} <div className="new-ticket-form-unit"> <label htmlFor="form-unit">واحد</label> <select name="form-unit" id="form-unit" required> <option value disabled selected className="form-unit-header"> واحد مورد نظر را انتخاب کنید </option> <option value="پیگیری سفارش">پیگیری سفارش</option> <option value="احراز هویت"> احراز هویت</option> <option value="مالی">مالی </option> <option value="سایر">سایر </option> </select> </div> </div> {/* Form order part */} <div className="new-ticket-form-order"> <label htmlFor="form-order">در خصوص سفارش</label> <select name="form-order" id="form-order"> <option value="">هیچکدام</option> </select> </div> {/* Form explain part */} <div className="new-ticket-form-explain"> <label htmlFor="form-explain">توضیحات</label> <textarea name="form-explain" id="form-explain" cols="60" rows="10" value={form_explain} onChange={(e) => { set_form_explain(e.target.value); }} ></textarea> </div> {/* ّForm upload file part */} <div className="new-ticket-form-upload-file"> <label htmlFor="">فایل پیوست</label> <label htmlFor="form-upload" className="form-upload"> <span>انتخاب فایل</span> <img src="https://img.icons8.com/metro/20/000000/upload.png" /> </label> <input type="file" name="form-upload" id="form-upload" /> <span className="form-upload-explain"> پسوندهای مجاز: jpg, jpeg, png, pdf, doc, docx, zip, rar حداکثر حجم فایل 5 مگابایت </span> </div> {/* Form submit btn */} <div className="new-ticket-form-submit"> <input type="submit" name="form-submit" id="form-submit" value="ارسال درخواست" onClick={() => { form_checker(); }} /> </div> </div> ) : ( "" )} </div> {/* Tickets log section */} <div className="tickets-log-container"></div> </div> );}
Advertisement
Answer
Try like this
import React, { useState } from 'react'; import "./tickets.css"; export default function App() { // States const [toggle_new_ticket, setToggle_new_ticket] = useState(false); const [form_title, set_form_title] = useState(''); const [form_unit, set_form_unit] = useState(''); const [form_explain, set_form_explain] = useState(false); let [check, setCheck] = useState(false); React.useEffect(() => { if (form_title !== '') { setCheck(true); } else { setCheck(false); } }, [form_title]) return ( <div className="tickets-container"> {/* New Ticket section */} <div className="tickets-new-ticket-container"> {/* New Ticket Title */} <div className="tickets-new-ticket-title" onClick={(e) => { setToggle_new_ticket(!toggle_new_ticket); }} > <div className="new-ticket-image"> <img src="https://img.icons8.com/external-tanah-basah-glyph-tanah-basah/48/000000/external-plus-user-interface-tanah-basah-glyph-tanah-basah-2.png" /> </div> <div className="new-ticket-title"> <sapn> ثبت درخواست جدید</sapn> </div> </div> {/* New Ticket Form */} {toggle_new_ticket ? ( <div className="tickets-new-ticket-form-container"> {/* Form top container */} <div className="tickets-new-ticket-form-top-container"> {/* Form title part */} <div className="new-ticket-form-title"> <label htmlFor="form-title">عنوان</label> <input onChange={(e) => { set_form_title(e.target.value); }} className={ check ? 'form-correct' : 'form-alarm'} type="text" name="form-title" id="form-title" required value={form_title} title="عنوان مورد نظرتان را وارد کنید" {...console.log(check)} /> <span>current state of title:{}</span> </div> {/* Form unit part */} <div className="new-ticket-form-unit"> <label htmlFor="form-unit">واحد</label> <select name="form-unit" id="form-unit" required > <option value disabled selected className="form-unit-header" > واحد مورد نظر را انتخاب کنید </option> <option value="پیگیری سفارش"> پیگیری سفارش </option> <option value="احراز هویت"> {' '} احراز هویت </option> <option value="مالی">مالی </option> <option value="سایر">سایر </option> </select> </div> </div> {/* Form order part */} <div className="new-ticket-form-order"> <label htmlFor="form-order">در خصوص سفارش</label> <select name="form-order" id="form-order"> <option value="">هیچکدام</option> </select> </div> {/* Form explain part */} <div className="new-ticket-form-explain"> <label htmlFor="form-explain">توضیحات</label> <textarea name="form-explain" id="form-explain" cols="60" rows="10" value={form_explain} onChange={(e) => { set_form_explain(e.target.value); }} /> </div> {/* ّForm upload file part */} <div className="new-ticket-form-upload-file"> <label htmlFor="">فایل پیوست</label> <label htmlFor="form-upload" className="form-upload" > <span>انتخاب فایل</span> <img src="https://img.icons8.com/metro/20/000000/upload.png" /> </label> <input type="file" name="form-upload" id="form-upload" /> <span className="form-upload-explain"> پسوندهای مجاز: jpg, jpeg, png, pdf, doc, docx, zip, rar حداکثر حجم فایل 5 مگابایت </span> </div> {/* Form submit btn */} <div className="new-ticket-form-submit"> <input type="submit" name="form-submit" id="form-submit" value="ارسال درخواست" onClick={() => { form_checker(); }} /> </div> </div> ) : ( '' )} </div> {/* Tickets log section */} <div className="tickets-log-container" /> </div> ); }
Use UseEffect hook , when title was changed , it will be fire , and you can make a check is title empty or not , also not need use state callback for set check value.