CODEWITHSUNDEEP
javascriptjavajsfprimefaces
Oscar P
Oscar P

Reputation: 61

Combine Primefaces passwords validation: <p:password> and show/hide text/password icon together

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.

p:password example

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.

Upvotes: 2

Views: 4396

Answers (1)

Melloware
Melloware

Reputation: 12029

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');
}

Edit 10/11/2021: This is built into PrimeFaces 10 as toggleMask feature. See Showcase: http://primefaces.org/showcase/ui/input/password.xhtml

Upvotes: 9

Related Questions