電子メール フィールドがある JSF フォームを作成しています。メール形式を検証し、DB に対して一意性を確認する必要があります。
エンドユーザーがメール フィールドに入力したときにこれを確認する必要があります。DB に存在する場合は、フィールドの色を赤に、そうでない場合は緑に変更する必要があります。これをajaxで実行したいと思います。
PHP での例を見たことがありますが、JSF でそれを行う方法が明確ではありません。
電子メール フィールドがある JSF フォームを作成しています。メール形式を検証し、DB に対して一意性を確認する必要があります。
エンドユーザーがメール フィールドに入力したときにこれを確認する必要があります。DB に存在する場合は、フィールドの色を赤に、そうでない場合は緑に変更する必要があります。これをajaxで実行したいと思います。
PHP での例を見たことがありますが、JSF でそれを行う方法が明確ではありません。
一般的な電子メール形式の検証には、を使用できます<f:validateRegex>
。
<h:inputText id="email" value="#{bean.email}">
<f:validateRegex pattern="([^.@]+)(\.[^.@]+)*@([^.@]+\.)+([^.@]+)" />
</h:inputText>
<h:message for="email" />
ぼかしの検証を実行するには、を追加し<f:ajax event="blur">
ます。
<h:inputText id="email" value="#{bean.email}">
<f:validateRegex pattern="([^.@]+)(\.[^.@]+)*@([^.@]+\.)+([^.@]+)" />
<f:ajax event="blur" render="m_email" />
</h:inputText>
<h:message id="m_email" for="email" />
独自の電子メール検証のためValidator
に、契約に従ってJSFインターフェースを実装します。
@FacesValidator("uniqueEmailValidator")
public class UniqueEmailValidator implements Validator {
@Override
public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException {
if (value == null) {
return; // Let required="true" handle, if any.
}
String email = (String) value;
if (yourUserService.existEmail(email)) {
throw new ValidatorException(new FacesMessage(
FacesMessage.SEVERITY_ERROR, "Email is already in use.", null));
}
}
}
で登録します<f:validator>
<h:inputText id="email" value="#{bean.email}">
<f:validateRegex pattern="([^.@]+)(\.[^.@]+)*@([^.@]+\.)+([^.@]+)" />
<f:validator validatorId="uniqueEmailValidator" />
<f:ajax event="blur" render="m_email" />
</h:inputText>
<h:message id="m_email" for="email" />
コンポーネントのスタイルを変更するには、ELinstyle
またはstyleClass
属性を使用できます。
<h:inputText id="email" value="#{bean.email}" styleClass="#{component.valid ? (facesContext.postback ? 'ok' : '') : 'error'}">
<f:validateRegex pattern="([^.@]+)(\.[^.@]+)*@([^.@]+\.)+([^.@]+)" />
<f:validator validatorId="uniqueEmailValidator" />
<f:ajax event="blur" render="@this m_email" />
</h:inputText>
<h:message id="m_email" for="email" />
このために必ずしもjQueryは必要ありません。また、jQueryはサーバー側ではなくクライアント側で実行されるため、堅牢性は低くなります(エンドユーザーは、クライアント側で実行されるものを100%制御できます)。