diff --git a/frontend/components/forms/QuestionForm.tsx b/frontend/components/forms/QuestionForm.tsx index 6f3b32d556..1e874e6dc0 100644 --- a/frontend/components/forms/QuestionForm.tsx +++ b/frontend/components/forms/QuestionForm.tsx @@ -32,6 +32,11 @@ const QuestionForm: React.FC = ({ ...formData, title: e.target.value, }); + + setErrors((prevErrors) => ({ + ...prevErrors, + title: false, + })); }; const handleComplexityOnChange = ( @@ -41,13 +46,23 @@ const QuestionForm: React.FC = ({ ...formData, complexity: e.target.value, }); + + setErrors((prevErrors) => ({ + ...prevErrors, + complexity: false, + })); }; const handleCategoryOnChange = (e: React.ChangeEvent) => { setFormData({ ...formData, - category: e.target.value.split(","), + category: e.target.value.split(",").filter(Boolean), }); + + setErrors((prevErrors) => ({ + ...prevErrors, + category: false, + })); }; const handleDescriptionOnChange = ( @@ -57,6 +72,11 @@ const QuestionForm: React.FC = ({ ...formData, description: e.target.value, }); + + setErrors((prevErrors) => ({ + ...prevErrors, + description: false, + })); }; const handleExamplesOnChange = (e: React.ChangeEvent) => { @@ -64,6 +84,11 @@ const QuestionForm: React.FC = ({ ...formData, examples: e.target.value, }); + + setErrors((prevErrors) => ({ + ...prevErrors, + examples: false, + })); }; const handleConstraintsOnChange = ( @@ -73,6 +98,11 @@ const QuestionForm: React.FC = ({ ...formData, constraints: e.target.value, }); + + setErrors((prevErrors) => ({ + ...prevErrors, + constraints: false, + })); }; const isValid = () => { @@ -86,7 +116,7 @@ const QuestionForm: React.FC = ({ newErrors.complexity = true; } - if (formData.category.length === 0) { + if (!formData.category || formData.category.length === 0) { newErrors.category = true; } @@ -99,7 +129,9 @@ const QuestionForm: React.FC = ({ return Object.keys(newErrors).length === 0; }; - const handleSubmit = () => { + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (!isValid()) { return; }