#7459 Show password requirements on forms

v1.10.0
closed
None
General
2018-10-30
2014-06-11
No

It would be helpful to show password requirements (aka min # of chars) on the password change form. And account creation.

Discussion

  • Shalitha Suranga

    This is implemented as backend validation. when I enter few chars in register form I got error message "Enter a value 6 characters long or more". But user need to click register button to see how many chars required minimum. You mean we can display before that ? maybe when user focuses password-field like real time validation

     
  • Dave Brondsema

    Dave Brondsema - 2018-10-16

    Right. One simple option would be to show the requirement right away as plain text. JS realtime validation upon focus would be nice too.

     
  • Dave Brondsema

    Dave Brondsema - 2018-10-16

    Also checking that the new passwords match each other would be nice.

     
  • Shalitha Suranga

    Hi.. Dave

    We can easily add reusable message for real-time validation in forms by doing some modifications at forge_form.html as per below. And validation logic can be done as extra_js snippet maybe.

          <div class="grid-{{15 + extra_width}}">{{field.display(**ctx)}}
            {% if field.real_valid %}
              <span id="rw_{{field.name}}"></span>
            {% endif %}
          </div>
    

    We set real_valid=True if we need to enable real time validation for a form widget

    What would you suggest. going with something like this?

     
  • Dave Brondsema

    Dave Brondsema - 2018-10-18

    forge_form.html is very generic and ends up used in lots of places, so I would prefer doing it only for the PasswordChangeBase/PasswordChangeForm and RegistrationForm forms that need it. And now that I think about it, I think browser validation can do a lot of this for us. minlength and maxlength attributes can be set on the input fields. To do this with easywidgets PasswordField I believe something like this should work:

                ew.PasswordField(
                    name='pw',
                    label='New Password',
                    ...
                    attrs=dict(minlength=6, maxlength=30),
                    ...
    

    Of course that's hardcoded numbers, that would change of course.

    Then the browser will do the enforcing when they hit submit. If we want to enforce it even sooner, we could try adding JS to call checkValidity or reportValidity on the fields whenever they change.

     
  • Shalitha Suranga

    Yeah I checked forge_form is very generic that's why I told this is reusable ;) . Nice idea with html element default validation tricks. we will only do for password field then. Binding event with password field is okay I mentioned how we can display real-time message. What would you suggest where we can display real-time message?

     
    • Shalitha Suranga

      You mean native browser validation is simply okay or better to extend using checkValidity and reportValidity to display real time message when user is typing password?

       
      • Dave Brondsema

        Dave Brondsema - 2018-10-18

        Native browser validations on submit is a good first step, at least they dont' have to submit the form then :)

        I would say try using checkValidity or reportValidity whenever the password field changes, that will run the browser's own validation again (before submit). That would be nice, but I suspect that in some browsers it might interfere with the user typing. If that happens, then I would suggest displaying our own message right next to the input field, maybe using the "tooltip" javascript widget so it can point right at the field.

         
  • Shalitha Suranga

    • status: open --> in-progress
     
  • Dave Brondsema

    Dave Brondsema - 2018-10-22
    • status: in-progress --> closed
    • assigned_to: Shalitha Suranga
    • Reviewer: Dave Brondsema
     
  • Dave Brondsema

    Dave Brondsema - 2018-10-30
    • Milestone: unreleased --> v1.10.0
     

Log in to post a comment.