PrimeFaces Fokusfehlerfeld automatisch

Wenn in PrimeFaces die Fokuskomponente <p: ​​focus> aktiviert ist: Beim Laden der Seite wird das erste sichtbare Eingabefeld angezeigt. Wenn die Überprüfung fehlgeschlagen ist, wird automatisch das erste Fehlerfeld angezeigt. Es funktioniert sehr gut und muss bei der Formularverarbeitung eine Komponente verwenden. Ich frage mich nur, warum es nicht standardmäßig aktiviert ist.

In diesem Lernprogramm zeigen wir Ihnen ein einfaches Anmeldeformular und verwenden <p: focus>, um sich auf das Fehlerfeld zu konzentrieren.

Benutztes Werkzeug :

  1. PrimeFaces 3.3

  2. JSF 2.1.11

  3. Eclipse 4.2

  4. Maven 3

  5. Tomcat 7

1. Anmeldeformular

Ein einfaches Formular, Benutzername und Passwort.

index.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

<h:head>

</h:head>
<h:body>
    <f:facet name="last">
      <h:outputStylesheet library="default" name="css/style.css"/>
    </f:facet>

    <h1>PrimeFaces focus example</h1>

    <div style="width: 500px">
    <h:form>
      <p:panel id="panel-signup">

          <!-- enable focus component -->
      <p:focus context="panel-signup"/>

      <p:inputText id="username" required="true" label="username"
        size="40" requiredMessage="Please enter your username."
        value="#{userAction.username}">
      </p:inputText>
      <p:watermark for="username" value="Username ** "/>
      <p:message for="username"/>

      <p:password id="password" required="true" label="password" size="40"
        requiredMessage="Please enter your password."
        match="confirmPassword" value="#{userAction.password}"
        maxlength="20">
      </p:password>
        <p:watermark for="password" value="Password ** "/>
        <p:message for="password"/>

      <p:password id="confirmPassword" required="true" size="40"
        requiredMessage="Please confirm your password."
        label="confirmPassword" value="#{userAction.password}"
        maxlength="20">
      </p:password>
      <p:watermark for="confirmPassword" value="Type Password Again ** "/>
      <p:message for="confirmPassword"/>

      <p:commandButton value="Register" style="margin:20px"
        action="#{userAction.register}" ajax="false"/>

      </p:panel>

    </h:form>
    </div>

</h:body>
</html>

UserBean.java - Nichts tun, wenn alles in Ordnung ist, zur Dankeseite weiterleiten.

package com.mkyong;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "userAction")
@SessionScoped
public class UserBean {

    String username;
    String password;

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String register() {
        return "thanks?faces-redirect=true";
    }

}

2. Demo

http://localhost : 8080/primefaces/index.jsf

Abbildung: Seite wird geladen, konzentrieren Sie sich auf die erste Eingabe (Benutzername).

Fokus auf erstes Eingabefeld

Abbildung: Überprüfung fehlgeschlagen, konzentrieren Sie sich auf das erste Feld, das den Fehler verursacht hat.

Fokus Fehlerfeld

Quellcode herunterladen

Laden Sie es herunter - Link://wp-content/uploads/2012/10/primefaces-focus-example.zip[primefaces-focus-example.zip](12 KB)