Oscar P :
I'm trying to set a password validation in Primefaces using p:password
and I need to add the show password eye icon too.
I need something like the picture below, show or hide the text/password when user clicks cursor.
PRIMEFACES JSF code:
<h:outputLabel for="pwd1" value="Password: " />
<p:password styleClass="Wid40" id="pwd1" value="#mybean.password1}" match="pwd2"
label="Password:" required="true" placeholder="Password" >
<button type="button" onclick="checkPassPwd1()" ><i class="show-pass fa fa-eye fa-lg"></i></button>
</p:password>
<h:outputLabel for="pwd2" value="Repeat Password: " />
<p:password styleClass="Wid40" id="pwd2" value="#{mybean.password2}"
required="true" placeholder="Password" >
<button type="button" onclick="checkPassPwd2()" ><i class="show-pass fa fa-eye fa-lg"></i></button>
</p:password>
JAVASCRIPT code:
function checkPassPwd1() {
var obj=document.getElementById('pwd1');
var c=obj.nextElementSibling
if (ojb.getAttribute('type') == "password") {
c.removeAttribute("class");
c.setAttribute("class","fas fa-eye");
obj.removeAttribute("type");
obj.setAttribute("type","text");
} else {
ojb.removeAttribute("type");
obj.setAttribute('type','password');
c.removeAttribute("class");
c.setAttribute("class","fas fa-eye-slash");
}
}
function checkPassPwd2() {
var obj=document.getElementById('pwd2');
var c=obj.nextElementSibling
if (ojb.getAttribute('type') == "password") {
c.removeAttribute("class");
c.setAttribute("class","fas fa-eye");
obj.removeAttribute("type");
obj.setAttribute("type","text");
} else {
ojb.removeAttribute("type");
obj.setAttribute('type','password');
c.removeAttribute("class");
c.setAttribute("class","fas fa-eye-slash");
}
}
I don't know how to change the text to password and vice versa using javascript and p:password, and I don´t know how to enable/disable the show-pass and hide-pass icon when the user clicks the icon.
Melloware :
It is way simpler than that you don't need to remove the attribute just change it. Using JQuery. In the example below your pwd1 is in an h:form called "frmPassword" and name your button id="button1".
var field = $('#frmPassword\\:pwd1');
var button= $('#frmPassword\\:button1');
if (field.attr('type') === 'password') {
field.attr('type', 'text');
button.removeClass('fas fa-eye-slash');
button.addClass('fas fa-eye');
} else {
field.attr('type', 'password');
button.removeClass('fas fa-eye');
button.addClass('fas fa-eye-slash');
}
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=310377&siteId=1