Tutorial feedback - Form validation

[umaar]

Following on from #250, going to cover a few bits of feedback on step 2: https://dojo.io/tutorials/1015_form_validation/#2

Feedback 1

Step 2: “we need to dust off the regexes and write a basic validation function.”

To encourage best practices and using the web platform, can we replace the regular expression based validation with the JavaScript validation API which should have email validation built in? This is a little confusing! Note: the tutorial does state:

“You are free to substitute a more robust email test,”

Feedback 2

Step 2: “Create a private _validateInput method in ApplicationContext.ts”

The code example uses a JavaScript for-in loop, how about using a more functional approach, maybe with the reduce() method & object.entries()?

Feedback 3 ✅ done

Step 2: “Update the WorkerForm render to display validation state”

Should read “Update the render method of the WorkerForm class….”

Feedback 4 ✅ done

Step 2: “ that sets aria-invalid and toggles classes”

Clarify: “that sets the aria-invalid attribute on a DOM node, and toggles classes”

Feedback 5

Step 2: “We also add a novalidate attribute to the form “

When adding a novalidate property with a value of true:

return v('form', {
	classes: this.classes(css.workerForm),
	onsubmit: this._onSubmit,
	novalidate: true
}

It doesn’t work and there are no errors in the terminal. Is this a bug? Should Dojo be more forgiving and allow both ‘true’ and true to be passed in?

Feedback 6

Step 2: “Extend TextInput to create a ValidatedTextInput widget with an error message and onValidate method”

I think there should be more guidance here, without giving too much of the solution away.