Submit New Question: Fix bug when correct answer is not indicated

[kevmhughes]

Description:

When attempting to submit a new question without selecting a correct answer, a validation message correctly displays an error. However, all form fields are cleared forcing the user to re-enter all the data. The form should retain the user's original input, allowing the user to close the error notification and then simply select the correct answer and resubmit, instead of having to re-enter all the information again.

This screenshot shows the form with all fields cleared after trying to submit a question without a correct answer selected.

Steps to Reproduce:

1. Access the page: http://localhost:3000/submit-new-question
2. Fill out the following fields which have the following ids:
   • Question Field: #question
   • Answer 1 Field: #answer1text
   • Answer 2 Field: #answer2text
   • Answer 3 Field: #answer3text
   • Answer 4 Field: #answer4text
3. Leave all the checkboxes unselected:
   • Checkbox 1: #answer1Checkbox
   • Checkbox 2: #answer2Checkbox
   • Checkbox 3: #answer3Checkbox
   • Checkbox 4: #answer4Checkbox
4. Submit the form.

This screenshot shows which fields must be filled out to reproduce the unwanted behaviour.

Expected Behaviour:

If no correct answer is selected, on submitting the question an error notification should be displayed. After the message is shown, the user should be able to close the error notification and all previously entered form data (text fields) should remain intact. The user should only need to select the correct answer(s) and resubmit the form.

Actual Behaviour:

When the user submits the question without selecting an answer, all the form fields are cleared forcing the user to re-enter all the data. This behaviour is not expected and disrupts the user experience.

Solution:

The issue arises because the form data is not stored as an object and then passed back to the view after a validation failure. To fix this, we need to ensure that the form is repopulated with the user’s original input after a failed validation.

Steps for a Robust Solution:

Store Form Data on Validation Failure:

• After the form submission fails validation, store the input data (e.g., from req.body) in an object.
• This object should be passed back to the view, allowing the form to be pre-populated with the user's original input. This way, the user does not need to re-enter all the information.

Pass Data Back to the View:

• When the form is re-rendered after a failed validation, ensure that the data from the form submission (stored in req.body) is passed to the view. This allows us to repopulate the form with the previously entered values, improving the user experience.

Render the Form with the Existing Data:

• In the EJS template, use the passed form data to populate the form fields.
• For example, when rendering a <textarea>, use a ternary operator to safely display the existing value or leave it blank if no data is provided:

<textarea name="question"> <%= formInputs && formInputs.question ? formInputs.question : '' %> </textarea>

Things to Take into Consideration:

Ensure Data Integrity:

• Always pass the form data as an object (e.g., formInputs) to the view, both when the form is first rendered and after a validation failure. If the form data is missing or undefined, it can cause the view to crash or fail to render properly.

Avoid Null or Undefined Values:

• When populating form fields, ensure that you never pass null or undefined. This can be handled using conditional checks like the ternary operator above, which will default to an empty string ('') if the value is missing.

Consistent Data Passing:

• Make sure that the form data object is passed to all instances of the view being rendered. This includes both the form submission page and any functions that handle form processing or error display (e.g., newQuestionForm()).

[omiras]

Your description highlights the problem effectively, making it easy to understand the expected behavior and current bug. Great job!