PASSWORD type field does not turn red, when required

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
gonzalo_g2c
Posts: 4
Joined: 06 Aug 2019, 21:16

20 Feb 2023, 04:28

Hello everyone, I have a problem with <p:password>, when I put it required="true" and execute the method of a button to start session, it does not paint red, but if the alert message is displayed, someone knows what it is for.

this is my code

<h:body styleClass="login-body">
<p:growl id="growl" showDetail="true" sticky="false" life="6000"/>
<h:form id="frmLogin">
<div class="p-col-12 logo-container">
<h1>SISTEMA VISOR DE AUDITORÍAS MÉDICAS</h1>
<h2>INGRESO DE USUARIO AL SISTEMA #{loginMB.ambiente}</h2>
<p:graphicImage name="images/LogoIESS-v2.0.png" library="verona-layout" />
</div>
<div class="p-col-12">
<p:focus for="txtUsuario" ></p:focus>
<p:inputText id="txtUsuario" placeholder="Usuario" required="true" value="#{loginMB.user.usuario}" label="Usuario" />
</div>
<div class="p-col-12">
<p:password id="txtClave" placeholder="Clave" required="true" value="#{loginMB.user.password}" label="Clave"/>
</div>
<div class="p-col-12 button-container">
<p:commandButton value="Iniciar Sesion" styleClass="ui-button-info p-mr-2 p-mb-2" update="frmLogin growl"
action="#{loginMB.login()}"/>
</div>
<div class="p-col-12 button-container">
<p:commandLink value="¿Olvidó su contraseña?" />
</div>
</h:form>
<h:outputStylesheet name="css/layout-#{guestPreferences.layout}.css" library="verona-layout" />
</h:body>


The txtUsuario field changes to red when I clicked the button, but not the txtClave field.

olgubasak
Posts: 98
Joined: 05 Jan 2023, 11:05

21 Feb 2023, 11:20

Hi,
As a solution suggestion, you can adapt the code I have added below to your own code.

Code: Select all

<div class="col-12">
                <p:password class="login-password"
                            placeholder="Password"
                            required="true" />
            </div>
            <div class="col-12 chkbox-container">
                <p:selectBooleanCheckbox id="remember-me" />
                <p:outputLabel for="remember-me"
                               value="Remember Me" />
            </div>
            <div class="col-12 button-container">
                <p:commandButton type="button"
                                 onclick="$('.login-password').val() ? $('.login-password').removeClass('ui-state-error') :  $('.login-password').addClass('ui-state-error')"
                                 value="Sign In"
                                 icon="fa fa-user"
                                 styleClass="ui-button-success rounded-button ui-button-raised" />
            </div>

Post Reply

Return to “Verona - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests