当失去第二个字段的焦点时，如何通过f:ajax验证两个密码字段

我曾经验证过两个密码，检查它们是否相同，如下所示:

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

但是我想在密码的第二个字段失去焦点时进行此验证，这就是我使用<f:ajax..>字段的原因，但这里似乎缺少了一些东西。会是什么呢?

<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>

更新2 有了BalusC的建议，一切都很顺利，因为我忘记定义我的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>

<f:ajax>默认只提交当前组件(如execute="@this")。如果您打算同时提交另一个组件，那么您需要显式指定其客户端ID:

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

这样，与password组件相关联的验证器也会被触发。

参见:

如何通过ajax验证两个密码字段?(一个密切相关的问题，由你自己问)

更新:根据注释，确保模板中有<h:head>，否则JSF将无法自动包含必要的jsf.js JavaScript文件，其中包含负责<f:ajax>魔术的代码。

参见:

相关内容

最新更新

热门标签：