ajax - 如何通过 f :ajax when losing focus of second field? 验证两个密码字段

标签 ajax validation jsf jsf-2 passwords

我曾经验证两个密码,检查它们是否相同,这样:

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

在验证器中:
@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 相关联的验证器组件也将被触发。
也可以看看:
  • How validate two password fields by ajax? (一个密切相关的问题,由您自己提出)

  • 更新 :根据评论,确保您拥有 <h:head>在模板中,否则 JSF 将无法自动包含必要的 jsf.js包含负责 <f:ajax> 的代码的 JavaScript 文件魔法。

    关于ajax - 如何通过 f :ajax when losing focus of second field? 验证两个密码字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15891264/

    相关文章:

    java - 从 Jquery 调用 Bean 方法

    javascript - 如何增加文本框中的值

    php - 数据从 php 发送到 ajax

    c# - RadDateTimePicker + 用于数据输入的掩码

    javascript - 如何使用 jQuery 验证 HTML 表单上的单选按钮?

    jquery - jquery datepicker 上的自定义动态验证直到第二个焦点才起作用

    java - 如何预填充重复 h :selectOneMenu?

    java - <丰富:popupPanel buttons not working in JSF Project

    javascript - 如何发布请求并将响应呈现为新页面?

    javascript - 将 HTML 中的用户输入值传递给 jQuery.Ajax