I found that whilst using a form with passwordStrength setup on a field I could get duplicate elements showing up for the passwordStrength widget. Whilst using the form I would have a correct element:
<p class="password-strength">password strength: weak</p>
Then as the form validators run before the form submission I would have:
<p class="password-strength"></p><p class="password-strength">password strength: weak</p>
Then if something went wrong during the form submission I would have:
<p class="password-strength"></p><p class="password-strength"></p><p class="password-strength">password strength: weak</p>
By looking at the passwordStrength function I was able to determine that it can accept a messageContainer option. When I used that option the duplicate messages were removed.
So to avoid duplicate messages setup the widget like this:
widget: { name: 'passwordStrength', options: { messageContainer: $('#passwordStrength')[0] } }
And include the container referenced by messageContainer immediately after the form field:
<p id="passwordStrength" class="password-strength"></p>
I suspect that the passwordStrength function could be improved to avoid adding duplicate elements near line 2913 in cyclops.js:
container = options.messageContainer ? $(options.messageContainer) : $('<p class=\'password-strength\'></p>');
The passwordStrength validator is supposed to be used with the passwordStrength widget. See http://assets.ctl.io/cyclops/1.8.4/validators.html#passwordStrength.
It doesn't look like there has ever been any documentation for the passwordStrength widget at http://assets.ctl.io/cyclops/1.8.4/widgets.html.
I found that whilst using a form with passwordStrength setup on a field I could get duplicate elements showing up for the passwordStrength widget. Whilst using the form I would have a correct element:
<p class="password-strength">password strength: weak</p>
Then as the form validators run before the form submission I would have:
<p class="password-strength"></p><p class="password-strength">password strength: weak</p>
Then if something went wrong during the form submission I would have:
<p class="password-strength"></p><p class="password-strength"></p><p class="password-strength">password strength: weak</p>
By looking at the passwordStrength function I was able to determine that it can accept a messageContainer option. When I used that option the duplicate messages were removed.
So to avoid duplicate messages setup the widget like this:
widget: { name: 'passwordStrength', options: { messageContainer: $('#passwordStrength')[0] } }
And include the container referenced by messageContainer immediately after the form field:<p id="passwordStrength" class="password-strength"></p>
I suspect that the passwordStrength function could be improved to avoid adding duplicate elements near line 2913 in cyclops.js:
container = options.messageContainer ? $(options.messageContainer) : $('<p class=\'password-strength\'></p>');