JSF Validator mit AJAX

Java-Forum Jakarta EE (Java EE)
1

Hi ich möchte in JSF einen Validator erstellen für die Eingabe von Email Adressen, dieser soll ausgeführt werden sobald das Textfeld für die Eingabe von Email Adressen verlassen wurde. Wenn die Email korrekt ist soll ein grüner Text mit einem häkchen ersscheinen ,wenn nicht ein roter Text mit X. Wenn ich die Email eingebe und das Textfeld verlasse ändert sich nichts.
Hier ein Bild zur Darstellung des Problems.

test.xhtml


<h:body>
   <h:form id="regiForm">
   <p:panelGrid styleClass="companyHeaderGrid">
                        <p:column>
                           <h:outputLabel for="mail" value="E-Mail: " />
                        </p:column>
                        <p:column>

                            <p:inputText  styleClass="column2" id="mail" validatorMessage="Invalid email format" required="true" value="#{regiBean.email}"
                                          validator="#{regiBean.validateMail}" immediate="true" >
                              
                                <f:ajax execute="@form" render="@form" /> 
                                <h:message for="mail" errorStyle="color:red; display:block" /> 
                                
                            </p:inputText>
                        </p:column>
                    </p:row>

                    <p:row>
                        <p:column>
                            <h:outputLabel value="Username: " />
                        </p:column>
                        <p:column>
                            <h:outputLabel id="username" rendered="#{regiBean.correctMail}" value="#{regiBean.email}" />
                        </p:column>
                    </p:row>
           </p:panelGrid>
            </h:form>
 </h:body>

RegisterBean.java


@ManagedBean(name = "regiBean")
@SessionScoped
public class RegisterBean {

	private String email;
	private String username;
	private String password;
	private String repeatpassword;
	private String firstname;
	private String lastname;
	private boolean correctMail;
	private boolean gtc;

       //... Getter und Setter
       
        // Emailvalidator
       	public void validateMail(FacesContext context, UIComponent component,
			Object value) throws ValidatorException {
		String email = String.valueOf(value);
		boolean valid = true;
		if (value == null) {
			valid = false;
		} else if (!email.contains("@")) {
			valid = false;
		} else if (!email.contains(".")) {
			valid = false;
		} else if (email.contains(" ")) {
			valid = false;
		}
		if (!valid) {
			FacesMessage message = new FacesMessage(
					FacesMessage.SEVERITY_ERROR, "Invalid email address",
					"The email address you entered is not valid.");
			throw new ValidatorException(message);
		}
		if (valid)
			correctMail = true;
	}

}
2

Ich bin zwar selber noch ganz neu in JSF aber wenn mich nicht alles täuscht muss eine Validator Klasse das Validator Interface implementieren. Wenn du einen eigenen Validator erstellst würde ich das in eine eigene Klasse stecken.
Für dein vorhaben gibt es meiner Meinung aber schon was fertiges und zwar den RegexValidator.

Das kann dann in etwa so aussehen:

                        <h:inputText id="email" value="#{Bean.email}" >
                            <f:validateRegex pattern="[a-zA-Z ]*"/> //du must hier den pattern noch auf eine email anpassen da gibts eh schon fertige sachen im web
                            <f:ajax event="keyup" render="emailmessage" execute="@this"   />
                        </h:inputText>
<h:messages for="email" id="emailmessage"/>
3

ok danke für die Antwort ich werds mal ausprobieren

*** Edit ***

Die Email Validation funktioniert soweit , aber wie kann ich schaffen das die Zeile mit Username gerendert wird wenn die Email funkioniert


 <h:inputText  styleClass="column2" validatorMessage="Invalid Email Format"   id="email" value="#{regiBean.email}" >
          <f:validateRegex  pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$"/>
           <f:ajax event="keyup" render="emailmessage" execute="@this"   />
 </h:inputText>
         <h:messages for="email" id="emailmessage" />

Dieser Auschnitt soll angezeigt werden wenn die Email validation funktioniert hat.


  <p:column><h:outputLabel style="color:green" id="username" rendered="#{regiBean.correctMail}" value="#{regiBean.email}" /></p:column>
4

Du könntest das so machen:

<h:outputLabel id="username" style="#{facesContext.validationFailed ? ’display:inline;’ : ’display:none;’}" [...] />

facesContext.validationFailed gibt an ob ein Validationsfehler vorliegt, je nach dem wird wird dann die passende Visibility für das <h: output Element gesetzt.

Du müsstest dann noch

<f:ajax event="keyup" render="emailmessage" execute="@this"   />

auf

<f:ajax event="keyup" render="emailmessage username" execute="@this"   />

ändern.

5

Hi bekomm beim folgenden Attribut immer einen Fehler style="#{facesContext.validationFailed ? ’display:inline;’ : ’display:none;’}"

Im Tag sieht es folgend aus


<h:outputLabel style="#{facesContext.validationFailed ? ’display:inline;’ : ’display:none;’}"    id="username" value="#{regiBean.email}" />
6

Probier mal:

                  <h:outputLabel style="#{not facesContext.validationFailed ? 'display:inline; color:green;' : 'display:none;'}" value="test" />
7

es funktioniert hatte beim vorigen Tag vergessen die Anführungszeichen auszubessern :lol:

danke,danke

8

Hi
Hab jetzt ein noch ein Häkchen hinzugmeacht und das required Attribut hinzugefügt, leider funktioniert es jetzt nicht mehr.
Die Invalid Email Format Message wird mir angzeigt sobald ich ein Zeichen eingebe, die mail erscheint nicht mehr ?
Hab jetzt noch ein Picture hinzugefügt das nur ,dann angzeigt werden soll wenn das Format der Mail Adresse stimmt.

Hier nach mal mein Code
index.xhtml


<h:form id="regiForm">
   <h:outputLabel for="mail" value="E-Mail: " /> 
      <p:panelGrid columns="3">                                           
              <h:inputText  styleClass="column2"  validatorMessage="Invalid Email Format"   id="email" value="#{regiBean.email}" required="true"  >
                        <f:validateRegex pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$"/>
                        <f:ajax event="keyup" render="emailmessage username pic " execute="@this"   />           
               </h:inputText>
               <p:message id="emailmessage" for="email"/>
                         
               <h:outputLabel value="Username: " />                
               <h:outputLabel  for="email" style="#{facesContext.validationFailed ? 'display:inline;' : 'display:none;'};"    id="username" value="#{regiBean.email}" />
               <p:graphicImage url="ok.JPG" id="pic" style="#{facesContext.validationFailed ? 'display:inline;' : 'display:none;'};"  />

               <p:commandButton action="#{registerBean.register}"
               styleClass="regiButton" value="Registrieren"  />
                

         </p:panelGrid>
</h:form>