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
source to share
1 answer
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
}
}
+3
source to share