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
JavaScript
x
134
134
1
import { useState } from "react";2
import "./tickets.css";3
4
export default function Tickets() {5
// States6
const [toggle_new_ticket, setToggle_new_ticket] = useState(false);7
const [form_title, set_form_title] = useState("");8
const [form_unit, set_form_unit] = useState("");9
const [form_explain, set_form_explain] = useState(false);10
let [check, setCheck] = useState("");11
12
// States functions13
const form_checker = () => {14
setCheck(() => {15
if (form_title == "") {16
check = false;17
} else {18
check = true;19
}20
console.log(check);21
});22
};23
24
return (25
<div className="tickets-container">26
{/* New Ticket section */}27
<div className="tickets-new-ticket-container">28
{/* New Ticket Title */}29
<div30
className="tickets-new-ticket-title"31
onClick={(e) => {32
setToggle_new_ticket(!toggle_new_ticket);33
}}34
>35
<div className="new-ticket-image">36
<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" />37
</div>38
<div className="new-ticket-title">39
<sapn> ثبت درخواست جدید</sapn>40
</div>41
</div>42
{/* New Ticket Form */}43
{toggle_new_ticket ? (44
<div className="tickets-new-ticket-form-container">45
{/* Form top container */}46
<div className="tickets-new-ticket-form-top-container">47
{/* Form title part */}48
<div className="new-ticket-form-title">49
<label htmlFor="form-title">عنوان</label>50
<input51
onChange={(e) => {52
set_form_title(e.target.value);53
}}54
className={check ? "form-correct" : "form-alarm"}55
type="text"56
name="form-title"57
id="form-title"58
required59
value={form_title}60
title="عنوان مورد نظرتان را وارد کنید"61
{console.log(check)}62
/>63
<span>current state of title:{}</span>64
</div>65
{/* Form unit part */}66
<div className="new-ticket-form-unit">67
<label htmlFor="form-unit">واحد</label>68
<select name="form-unit" id="form-unit" required>69
<option value disabled selected className="form-unit-header">70
واحد مورد نظر را انتخاب کنید71
</option>72
<option value="پیگیری سفارش">پیگیری سفارش</option>73
<option value="احراز هویت"> احراز هویت</option>74
<option value="مالی">مالی </option>75
<option value="سایر">سایر </option>76
</select>77
</div>78
</div>79
{/* Form order part */}80
<div className="new-ticket-form-order">81
<label htmlFor="form-order">در خصوص سفارش</label>82
<select name="form-order" id="form-order">83
<option value="">هیچکدام</option>84
</select>85
</div>86
{/* Form explain part */}87
<div className="new-ticket-form-explain">88
<label htmlFor="form-explain">توضیحات</label>89
<textarea90
name="form-explain"91
id="form-explain"92
cols="60"93
rows="10"94
value={form_explain}95
onChange={(e) => {96
set_form_explain(e.target.value);97
}}98
></textarea>99
</div>100
{/* ّForm upload file part */}101
<div className="new-ticket-form-upload-file">102
<label htmlFor="">فایل پیوست</label>103
<label htmlFor="form-upload" className="form-upload">104
<span>انتخاب فایل</span>105
<img src="https://img.icons8.com/metro/20/000000/upload.png" />106
</label>107
<input type="file" name="form-upload" id="form-upload" />108
<span className="form-upload-explain">109
پسوندهای مجاز: jpg, jpeg, png, pdf, doc, docx, zip, rar حداکثر110
حجم فایل 5 مگابایت111
</span>112
</div>113
{/* Form submit btn */}114
<div className="new-ticket-form-submit">115
<input116
type="submit"117
name="form-submit"118
id="form-submit"119
value="ارسال درخواست"120
onClick={() => {121
form_checker();122
}}123
/>124
</div>125
</div>126
) : (127
""128
)}129
</div>130
{/* Tickets log section */}131
<div className="tickets-log-container"></div>132
</div>133
);}134
Advertisement
Answer
Try like this
JavaScript
1
152
152
1
import React, { useState } from 'react';2
import "./tickets.css";3
export default function App() {4
// States5
const [toggle_new_ticket, setToggle_new_ticket] = useState(false);6
const [form_title, set_form_title] = useState('');7
const [form_unit, set_form_unit] = useState('');8
const [form_explain, set_form_explain] = useState(false);9
let [check, setCheck] = useState(false);10
11
12
React.useEffect(() => {13
if (form_title !== '') {14
setCheck(true);15
} else {16
setCheck(false);17
}18
}, [form_title])19
20
return (21
<div className="tickets-container">22
{/* New Ticket section */}23
<div className="tickets-new-ticket-container">24
{/* New Ticket Title */}25
<div26
className="tickets-new-ticket-title"27
onClick={(e) => {28
setToggle_new_ticket(!toggle_new_ticket);29
}}30
>31
<div className="new-ticket-image">32
<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" />33
</div>34
<div className="new-ticket-title">35
<sapn> ثبت درخواست جدید</sapn>36
</div>37
</div>38
{/* New Ticket Form */}39
{toggle_new_ticket ? (40
<div className="tickets-new-ticket-form-container">41
{/* Form top container */}42
<div className="tickets-new-ticket-form-top-container">43
{/* Form title part */}44
<div className="new-ticket-form-title">45
<label htmlFor="form-title">عنوان</label>46
<input47
onChange={(e) => {48
set_form_title(e.target.value);49
}}50
className={ check ? 'form-correct' : 'form-alarm'}51
type="text"52
name="form-title"53
id="form-title"54
required55
value={form_title}56
title="عنوان مورد نظرتان را وارد کنید"57
{console.log(check)}58
/>59
<span>current state of title:{}</span>60
</div>61
{/* Form unit part */}62
<div className="new-ticket-form-unit">63
<label htmlFor="form-unit">واحد</label>64
<select65
name="form-unit"66
id="form-unit"67
required68
>69
<option70
value71
disabled72
selected73
className="form-unit-header"74
>75
واحد مورد نظر را انتخاب کنید76
</option>77
<option value="پیگیری سفارش">78
پیگیری سفارش79
</option>80
<option value="احراز هویت">81
{' '}82
احراز هویت83
</option>84
<option value="مالی">مالی </option>85
<option value="سایر">سایر </option>86
</select>87
</div>88
</div>89
{/* Form order part */}90
<div className="new-ticket-form-order">91
<label htmlFor="form-order">در خصوص سفارش</label>92
<select name="form-order" id="form-order">93
<option value="">هیچکدام</option>94
</select>95
</div>96
{/* Form explain part */}97
<div className="new-ticket-form-explain">98
<label htmlFor="form-explain">توضیحات</label>99
<textarea100
name="form-explain"101
id="form-explain"102
cols="60"103
rows="10"104
value={form_explain}105
onChange={(e) => {106
set_form_explain(e.target.value);107
}}108
/>109
</div>110
{/* ّForm upload file part */}111
<div className="new-ticket-form-upload-file">112
<label htmlFor="">فایل پیوست</label>113
<label114
htmlFor="form-upload"115
className="form-upload"116
>117
<span>انتخاب فایل</span>118
<img src="https://img.icons8.com/metro/20/000000/upload.png" />119
</label>120
<input121
type="file"122
name="form-upload"123
id="form-upload"124
/>125
<span className="form-upload-explain">126
پسوندهای مجاز: jpg, jpeg, png, pdf, doc, docx,127
zip, rar حداکثر حجم فایل 5 مگابایت128
</span>129
</div>130
{/* Form submit btn */}131
<div className="new-ticket-form-submit">132
<input133
type="submit"134
name="form-submit"135
id="form-submit"136
value="ارسال درخواست"137
onClick={() => {138
form_checker();139
}}140
/>141
</div>142
</div>143
) : (144
''145
)}146
</div>147
{/* Tickets log section */}148
<div className="tickets-log-container" />149
</div>150
);151
}152
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.