Geek Answers Handbook

How to check two password fields by f: ajax when the focus of the second field is lost?

I used to verify the two passwords, checking to see if they are the same, as follows:

Password: <h:message id="m_password" for="password" /><br/> <h:inputSecret id="password" value="#{userC.user.password}" maxlength="15" size="15" required="true"> <f:validator validatorId="confirmPasswordValidator" /> <f:attribute name="confirm" value="#{confirmPassword.submittedValue}" /> </h:inputSecret> <br/> Password (yes, again): <h:message id="m_confirm_password" for="confirm_password" /><br/> <h:inputSecret id="confirm_password" binding="#{confirmPassword}" maxlength="15" size="15" required="true"> <f:ajax event="blur" render="m_password m_confirm_password" /> </h:inputSecret> <br/>

And in the validator:

 @FacesValidator("confirmPasswordValidator") public class ConfirmPasswordValidator implements Validator { @Override public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException { String password = (String) value; String confirm = (String) component.getAttributes().get("confirm"); if (password == null || confirm == null) { return; // Just ignore and let required="true" do its job. } if (!password.equals(confirm)) { throw new ValidatorException(new FacesMessage(FacesMessage.SEVERITY_ERROR, null, "passwords don't match")); } } }

But I would like to do this check when the second password field loses focus, so I use the <f:ajax..> field, but there seems to be something missing. What could it be?

Update

 <h:form id="change_password_form"> Password: <h:message id="m_password" for="password" /><br/> <h:inputSecret id="password" value="#{userC.user.password}" maxlength="15" size="15" required="true"> <f:validator validatorId="confirmPasswordValidator" /> <f:attribute name="confirm" value="#{confirmPassword.submittedValue}" /> </h:inputSecret> <br/> Password (yes, again): <h:message id="m_confirm_password" for="confirm_password" /><br/> <h:inputSecret id="confirm_password" binding="#{confirmPassword}" maxlength="15" size="15" required="true"> <f:ajax event="blur" execute="@this password" render="m_password m_confirm_password" /> </h:inputSecret> <br/> <h:commandButton id="change_passord" action="#{userC.changePassword}" value="Change Password" /> <h:messages globalOnly="true" escape="false" /> </h:form>

update 2 With the BalusC proposal, everything went fine, as I forgot to define my template :

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <ui:composition template="/resources/jsf/include/default.xhtml"> <ui:define name="content"> <h:form id="change_password_form"> Password: <h:message id="m_password" for="password" /><br/> <h:inputSecret id="password" value="#{userC.user.password}" maxlength="15" size="15" required="true"> <f:validator validatorId="confirmPasswordValidator" /> <f:attribute name="confirm" value="#{confirmPassword.submittedValue}" /> </h:inputSecret> <br/> Password(yes, again): <h:message id="m_confirm_password" for="confirm_password" /><br/> <h:inputSecret id="confirm_password" binding="#{confirmPassword}" maxlength="15" size="15" required="true"> <f:ajax event="blur" execute="@this password" render="m_password m_confirm_password" /> </h:inputSecret> <br/> <h:commandButton id="change_passord" action="#{userC.changePassword}" value="Change password" /> <h:messages globalOnly="true" escape="false" /> </h:form> </ui:define> </ui:composition> </html>
+4
source share
1 answer

<f:ajax> sends the current component by default (for example, execute="@this" ). If you intend to send another component along with it, then you need to explicitly specify its client identifier:

 <f:ajax ... execute="@this password" />

This will launch the validators associated with the password component.

See also:

Update : according to the comments, make sure that the template has <h:head> , otherwise JSF will not be able to automatically include the necessary jsf.js JavaScript file containing the code responsible for the magic <f:ajax> .

+4
source

More articles:


All Articles