Value Confirmation with h5Validate
There are a few human interface tips for creating successful value confirmation components:
The error must be highly visible. Applying red outlines on invalid fields is a good idea.
Validation must occur in real-time as the human attmepts to correct the discrepancy between the original value used for commiting data, and the replica value used for validation. Validation must occur as the human types and re-types in either field, presenting or dismissing visible error markers.
The following snippet implements password validation with a popular JavaScript component h5Validate with the following assumptions:
The app uses $ for jQuery.
Whenever two password fields are contained in .set-user-password, a validation link is anticipated.
One thing to note is the escapeRegex function appropriated from jQuery UI. This ensures that special characters are matched properly, avoiding situations like when a . placed in the source string allowed any character to be matched (which defeats the purpose of validation).
$form.on("keyup blur change", ".set-user-password :password", function () { var $this = $(this); var $allPasswordFields = $this.closest(".set-user-password").find(":password"); var escapeRegex = function (value) { // Stolen from $.ui.autocomplete.escapeRegex return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&"); }; if ($allPasswordFields.length == 2) { if ($this.is($allPasswordFields.eq(0))) { var $next = $allPasswordFields.eq(1); $next.attr("pattern", escapeRegex($this.val())); if ($next.val().length) { $next.h5Validate("isValid"); } } } });