Seeding Input: Allows invalid inputs

[braughtg]

Description: When creating a new Seeding Input Log, it is possible to enter values that are invalid, such as negative numbers and decimal values that do not make sense in certain categories (e.g. Workers: 9.4).

Directions to Replicate the Bug

1. Open the FarmData2 Application
2. Click on the Seeding Input button in the FieldKit Tab
3. Select any Date of Seeding, Crop, Area, and choose either Tray Seeding or Direct Seeding
4. Enter invalid values, such as negative numbers or decimal values
5. Click Submit

Expected Results: The application should not let the user submit these values and should give the user an error message that notifies them of the appropriate values that they should input.

Observed Results: The application allows the user to submit these invalid values and stores this Seeding Input Log with the rest of the data.

---

Issue by goldberl
Saturday Dec 11, 2021 at 21:42 GMT
Originally opened as DickinsonCollege/FarmData2#333

[braughtg]

@FutzMonitor and I will be working on this issue as our first issue for the summer.

---

Comment by JingyuMarcelLee
Monday Jun 06, 2022 at 14:50 GMT

[braughtg]

I will be working on this issue with Marcel this summer.

---

Comment by FutzMonitor
Monday Jun 06, 2022 at 14:53 GMT

[braughtg]

This seems like it will be best handled using a Vue component. We will want a component (or several) that only allow valid values to be entered. Their type should be number to ensure that they bring up the numeric key pad on mobile devices. The field can then also prevent typing anything but a valid value (e.g. no negative numbers, or only 2 decimals).

This could be done using separate components for positive integers or decimal numbers but a more flexible solution would be to have the input validated using a regular expression. So maybe one component that only allows a character to be typed if the full content of the field will still match the regular expression. Then there could be components defined that use that one, but just pre-specify the reg-ex (e.g. positive integers, 2 decimals, etc).

There is an existing component for this that we may be able to adapt and incorporate: https://github.com/RoamIn/vue-pattern-input

---

Comment by braughtg
Monday Jun 06, 2022 at 20:52 GMT

[braughtg]

The component being created to address this issue should also include a watched prop for making the field disabled. This is important for when the user is asked to Confirm or Cancel the submission of a seeding log (or other logs in the future). In that situation, after "Submit" has been clicked the form will still be displayed, but will not be editable (i.e. will be disabled) until the user Confirms or Cancels the submission.

---

Comment by braughtg
Saturday Jun 18, 2022 at 15:05 GMT