Chart Form Validation #41
Conversation
Validate chart form when inputs change and prior to saving.
| <span class="input-group-addon" @click="showDatePicker($refs.targetEndDateInput)"> | ||
| <span class="glyphicon glyphicon-calendar"></span> | ||
| </span> | ||
| </div> | ||
| <div class="help-block error-help">{{ targetEndDateErrors }}</div> | ||
| <div class="help-block error-help">{{ errors.endError }}</div> | ||
| </div> | ||
| </fieldset> | ||
|
|
There was a problem hiding this comment.
Sometimes invalid fields aren't visible on the screen. This indicates why the save button is disabled.
There was a problem hiding this comment.
Nice, that's definitely an improvement.
Trim input values before validating them to match the behavior of `v-model`.
| */ | ||
| validateForm() { | ||
| const { $el } = this; | ||
| const inputs = $el.querySelectorAll(selector.validatedInputs); |
There was a problem hiding this comment.
According to MDN, not all browsers support using forEach on a NodeList, hence the for loop.
| @@ -179,6 +187,8 @@ import { | |||
| fieldLabel | |||
| } from '@/util'; | |||
|
|
|||
| const userDateFormat = 'MM/DD/YYYY'; | |||
There was a problem hiding this comment.
I don't think we need to deal with this now, but REDCap allows users to dictate their preferred date format. I'm not sure if this is available to us via the SDK, but it might be useful at some point.
There was a problem hiding this comment.
This is a good point. Right now I'm just trying to mimic the behavior of the jQuery version, so I opened issue #45 to track this.
There was a problem hiding this comment.
Seems like this is pretty similar to the previous behavior, but cleaned up a bit.
I like that it's declarative, but sometimes the logic gets confusing when we are validating a single field at a time, but that field has several dependencies (for instance, the validateTargetDate method). I wonder if a hybrid approach would simplify this. Keep the simple checks like formatting and required elements declarative, but then have a separate check for the more complicated model-level rules.
|
@lawhead I'm not 100% happy with how this came out, and I agree that it could use another round of refactoring. I also think it would be worthwhile to try a validation library like VeeValidate. |
Validate chart form when inputs change and prior to saving.