Empty Input Values Allowed in Contact Form - Update Required

[abdurezakfarah]

Issue Description

Currently, users are able to send email messages with empty input values in the Contact form. This behavior is not desirable as it leads to incomplete and potentially useless messages. To ensure that meaningful information is captured in every email, we need to update the Contact form to make certain inputs required and prevent the submission of empty input values.

Proposed Solution

To address this issue, we should implement the following changes to the Contact form:

Make certain inputs required: Identify the necessary fields that should not be left empty, such as name, email address, and message content. Mark these inputs as required in the form's HTML code.
Client-side validation: Implement client-side validation using JavaScript to prevent form submission if required inputs are left empty. Display appropriate error messages near the empty inputs, prompting users to provide the required information.
Server-side validation: Although client-side validation provides a good user experience, it's essential to have server-side validation as well. Double-check that the required inputs are not empty on the server-side before processing the form submission. If any required fields are missing, display an error message and prevent the email from being sent.
Clear form after submission: After a successful form submission, clear the input fields to provide a fresh and user-friendly experience for subsequent messages.
Acceptance Criteria

Users should not be able to submit the Contact form with empty required fields.
Validation errors should be displayed near the empty inputs in real-time.
Server-side validation should be implemented to catch any missed client-side validation or potential malicious attempts.
Upon successful submission, the form should clear all input fields.

[ladunjexa]

Hi awelrisak,

For the benefit of the community, I will answer this question this late so others will know. until I update the code, I'll briefly explain how to do it.

there is a two ways to do it (I recommend the second way)

1. In Contact.tsx component file, we've handleSubmit function, and the form state - we can add conditions on the form state keys and shows a popup accordingly or something. for example,

if(form.name === "") {
   alert("name is required");
   return;
}

2. alternatively, we can use built-in form validation, for example, add required attribute to the form field, will specify whether a form field needs to be filled before the form can be submitted. read more about it here.

Hope this helps you :)