Password and password re-entry with Polymer 1.0

Question

Password and password re-entry with Polymer 1.0

I am migrating to Polymer 1.0 from Polymer 0.5 and I cannot do a simple check - classic password scenario and password re-entry.

With Polymer 0.5, I had:

<paper-input-decorator id="passwordDecId" label="New password (8 caratteri almeno)" floatingLabel error="campo obbligatorio!">
    <input id="passwordId" onchange="validatePassword()" is="core-input" type="password" name="password" required pattern=".{8,32}">
</paper-input-decorator>
<paper-input-decorator id="reenterPasswordDecId" label="Re-enter password (8 caratteri almeno)" floatingLabel error="campo obbligatorio!">
    <input id="reenterPasswordId" onchange="validatePassword()" is="core-input" type="password" name="reenterPassword" required pattern=".{8,32}">
</paper-input-decorator>

and the validatePassword function:

function validatePassword() {
    var passwordDecorator = document.getElementById('passwordDecId');
    var passwordInput = document.getElementById('passwordId');
    var reenterPasswordDecorator = document.getElementById('reenterPasswordDecId');
    var reenterPasswordInput = document.getElementById('reenterPasswordId');
    var pass2 = reenterPasswordInput.value;
    var pass1 = passwordInput.value;

    if (pass1 != pass2) {
        reenterPasswordInput.setCustomValidity("Passwords Don't Match");
    } else {
        // empty string means no validation error
        reenterPasswordInput.setCustomValidity('');
    }

    passwordDecorator.isInvalid = !passwordInput.validity.valid;
    reenterPasswordDecorator.isInvalid = !reenterPasswordInput.validity.valid;
}

and it worked, but now, after switching to Polymer 1.0, I no longer use paper-design-decorator and so I would like to do everything with just paper input:

<paper-input id="passwordId" onchange="validatePassword()" name="password" type="text" label="New password" auto-validate required pattern=".{1,32}" error-message="1 caratteri almeno"></paper-input>

<paper-input id="reenterPasswordId" onchange="validatePassword()" name="reenterPassword" type="text" label="Re-enter password" auto-validate required pattern=".{1,32}" error-message="1 caratteri almeno"></paper-input>

I don't know how to change the function validatePassword

to show an error when the length of the two passwords is greater than 1 character , but the values are different , and when the user presses the submit button or when the input focus is lost.

+3

polymer polymer-1.0

Gamby Jul 12 15 at 15:45

source to share

1 answer

Fajar · Answer 1 · 2015-12-14T02:39:45+0000

Here is an example of how to validate a match password using Polymer 1.0

<paper-input label="Password" required value="{{pass::input}}" id="checkPassword"></paper-input>
<paper-input label="Re-type Password" required value="{{repass::input}}" on-change="passmatch" id="checkPassword"></paper-input>

and add the passmatch function

passmatch: function(e){
      var password = encodeURIComponent(this.pass);
      var confirmPassword = encodeURIComponent(this.repass);
      if(password != confirmPassword){
        // do something
      }
    }

Password and password re-entry with Polymer 1.0

More articles: