diff --git a/client/src/pages/A3JobEvaluationForm.jsx b/client/src/pages/A3JobEvaluationForm.jsx index f04c9b07..cb63ddf3 100644 --- a/client/src/pages/A3JobEvaluationForm.jsx +++ b/client/src/pages/A3JobEvaluationForm.jsx @@ -38,11 +38,15 @@ const evaluationItems = [ const A3JobEvaluationForm = () => { // Form state management const [formData, setFormData] = useState({ + interneeName: "", + interneeID: "", + interneeEmail: "", advisorSignature: "", advisorAgreement: false, coordinatorSignature: "", coordinatorAgreement: false, }); + const [errors, setErrors] = useState({}); // Ratings and comments const [ratings, setRatings] = useState({}); @@ -58,6 +62,24 @@ const A3JobEvaluationForm = () => { const [selectedFont, setSelectedFont] = useState(fonts[0]); const [activeTab, setActiveTab] = useState("type"); + // For validation of the form contents + const validateForm = () => { + const newErrors = {}; + if (!formData.interneeName?.trim()) newErrors.interneeName = "Name is required."; + if (!/^\d{9}$/.test(formData.interneeID || "")) newErrors.interneeID = "Enter a valid 9-digit Sooner ID."; + if (!/\S+@\S+\.\S+/.test(formData.interneeEmail || "")) newErrors.interneeEmail = "Invalid email."; + if (!formData.advisorSignature) newErrors.advisorSignature = "Signature is required."; + if (!formData.coordinatorSignature) newErrors.coordinatorSignature = "Signature is required."; + evaluationItems.forEach((item) => { + if (!ratings[item]) { + newErrors[`${item}_rating`] = "Please select one of these"; // Error message + } + }); + + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + // Signature canvas ref const sigCanvasRef = useRef(null); @@ -71,6 +93,7 @@ const A3JobEvaluationForm = () => { // Handle form input changes const handleChange = (field, value) => { setFormData((prev) => ({ ...prev, [field]: value })); + setErrors((prev) => ({ ...prev, [field]: undefined })); }; // Rating selection @@ -120,8 +143,8 @@ const A3JobEvaluationForm = () => { // Submit the form to the backend const handleSubmit = async (e) => { e.preventDefault(); - if (!formData.advisorAgreement || !formData.coordinatorAgreement) { - alert("Please confirm both signature agreements before submitting."); + if (!validateForm() || !formData.advisorAgreement || !formData.coordinatorAgreement) { + alert("Please confirm internee details and both signature agreements before submitting."); return; } try { @@ -130,12 +153,25 @@ const A3JobEvaluationForm = () => { { method: 'POST', headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ formData, ratings, comments }), + body: JSON.stringify({ + interneeName: formData.interneeName, + interneeID: formData.interneeID, + interneeEmail: formData.interneeEmail, + advisorSignature: formData.advisorSignature, + coordinatorSignature: formData.coordinatorSignature, + advisorAgreement: formData.advisorAgreement, + coordinatorAgreement: formData.coordinatorAgreement, + ratings, + comments, + }), } ); if (response.ok) { alert("Evaluation submitted successfully!"); setFormData({ + interneeName: "", + interneeID: "", + interneeEmail: "", advisorSignature: "", advisorAgreement: false, coordinatorSignature: "", @@ -191,10 +227,33 @@ const A3JobEvaluationForm = () => {