“I am Error.” – Error of Ruto
If you ever played Zelda II: The Adventure of Link, you might remember getting stumped when you first saw that line. Likewise, the validation errors in AngularJS can make you scratch your head and itching for a copy of Nintendo Power.
I’m going to explain the ones we’ve using so far. I’ve updated the JSFiddle so it dumps are the form validation properties underneath the verse, so you can see what changes as you time anything in.
Breaking down Angular’s validation
Here’s a summary of what each of the properties stand for.
$error.required
This returns true if I try to skip the input field, such as tabbing out of it or leaving it blank, since the input has the required attribute.
In our case, I want the user to put an answer, not just leave it blank, so I used $error.required to make the page squak if there’s no input.
$error.minlength & $error.maxlength
This returns true if the ng-minlength or ng-maxlength directives are in the input field, but the input doesn’t meet the requirements.
In our case, I’ve set the ng-minlength to 2 characters (which may not work if the verse says something like “O Lord…” or “a ram”, whereby the missing word could be less than 2 characters), and ng-maxlength to the length of the correct word. This will hopefully give users clues about the length of the missing word.
$error.pattern
This returns true if the input doesn’t match the RegExp of the ng-pattern attribute.
In our case, we’re pretty much just running a simple match to see if the the input value equals the word value.
Error and Bagu
Speaking of Errors and his brother Bagu, I’ve discovered a potential bug too.
We’re automatically splitting the verse up by using spaces as delimiters, and it’s possible that the users might not get the value correct if they forget punctuation. For example, if the missing word is at the end of the verse, $error.pattern is going to be true unless I enter “lender.” with the period.
I’ll need to fix this because I don’t want to penalize users for not getting punctuation.