Password validation not working. (2.0.5)

[voodooattack]

I'm not sure what the cause is, but this is happening even though the passwords match.

This is the code for my form:

setupForm() {
    var minPasswordLength = 6;
    $(React.findDOMNode(this)).form('destroy');
    $(React.findDOMNode(this)).form({
      fields: {
        firstName: {
          identifier: 'firstName',
          rules: [
            {
              type: 'empty',
              prompt: this.app.translate('Auth.EmptyFirstNameWarning')
            }
          ]
        },
        lastName: {
          identifier: 'lastName',
          rules: [
            {
              type: 'empty',
              prompt: this.app.translate('Auth.EmptyLastNameWarning')
            }
          ]
        },
        email: {
          identifier: 'email',
          rules: [
            {
              type: 'email',
              prompt: this.app.translate('Auth.InvalidEmailWarning')
            }
          ]
        },
        password: {
          identifier: 'password',
          rules: [
            {
              type: 'length[' + minPasswordLength + ']',
              prompt: this.app.translate('Auth.PasswordTooShortWarning', { length: minPasswordLength })
            }
          ]
        },
        passwordConfirm: {
          identifier: 'passwordConfirm',
          rules: [
            {
              type: 'match[password]',
              prompt: this.app.translate('Auth.MismatchedPasswordWarning')
            }
          ]
        },
        agreeToTerms: {
          identifier: 'agreeToTerms',
          rules: [
            {
              type: 'checked',
              prompt: this.app.translate('Auth.MustAgreeToTerms')
            }
          ]
        }
      },
      inline: true,
      onSuccess: this.submit.bind(this)
    });
  }

[sinning]

I ran into the same issue in version 2.0.4 after upgrading from 2.0.3. Rolled back to 2.0.3 and the validation worked again. Likely a bug introduced in 2.0.4

[jlukic]

@sinning @voodooattack
Can you provide the HTML with that example, or a different example. You can fork the JSFiddle in readme.

I'd like to get this patched today.

[voodooattack]

Here: https://jsfiddle.net/cm2dtoLu/2/

[jlukic]

I'm confused, i tried a 6 letter password in both password and password confirm and no error message shows.

[voodooattack]

Try with the passwords 'asdfasdf' or 'testtest'.

[jlukic]

Ohhhh. Yeah... i see..

Fixed fiddle
https://jsfiddle.net/vmpLeymu/

So the issue is really simple. In 2.0.4 I fixed all the validation rules. Previously length was operating as minLength even though it was suppose to be "exact length". But now there are three separate validations, minLength, length, and maxLength

It's kind of a sophie's choice because although the rule was previously named incorrectly people are already using it in code, so modifying its functionality is breaking peoples code. However people who are expecting length to operate as exactLength will have issues.

I think the safest way is to make minLength and length both work the same (to avoid issues with updates breaking changes), and add exactLength

[voodooattack]

Thank you for clarifying that! However, I just tried with minLength and it still says that passwords do not match (for 'asdfasdf').

[jlukic]

I copy and pasted "asdfasdf" into both fields in
https://jsfiddle.net/vmpLeymu/

No validation errors were added.

Can you confirm that you are using the same fiddle? If you still have issues, what OS/Browser.

[jlukic]

Semantic-Org/Semantic-UI-Docs@62ba9cc

[jlukic]

Thanks for helping out with this. Sore spot.

[voodooattack]

You're welcome. I'm glad it's resolved. It looks like the bug isn't happening in the fiddle but still happens in my project. I'll see if I can find out anything.

[sinning]

Here's another example:

https://jsfiddle.net/sinning/dhm4jo0s/1/

Type in sdfsdfsdfsdfs into username or password :)

[jlukic]

Again you are using length and not minLength. I'm about to push 2.0.6 which will make length function as minLength.. see release notes.

[badeamihai]

Hello, i'm going to write my question here even though i don't experience that particular problem.
@jlukic i see that @voodooattack used some kind of translation for the prompts error messages:

prompt: this.app.translate('Auth.EmptyFirstNameWarning')

Can you give me an idea on how i can make something similar, or how did he implement it. Also a best practice will be nice.

Thank you.

[badeamihai]

Hello again, i came back, this time with some kind of bug ( i think ) regarding password confirmation.

The validation works fine with one form, but in my situation i have a login modal, which is placed somewhere in the background. So, it is also available on the registration page. And i think there is a conflict between the 2 password fields of each form.

Here is a fiddle as example.
https://jsfiddle.net/wnxjx29e/

If i try to register first, the password validation will fail. If i play around with the login form, or just pop the modal, and then come back to register, it works.

Am i missing something? Thanks

[FlorentMasson]

@badeamihai thanks for your comment, it helped me as I was in the same situation : I had 2 fields in differents forms with same id. Making the ids unique solved the issue (they should be as per HTML spec anyway)