كيفاش تدير form validation ب jsf
نظرة سريعة بالفيديو
1- الملف form.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:a="http://xmlns.jcp.org/jsf/facelets" >
<h:head>
<title>Form Validation</title>
<style>
.container{
margin-top:30px;
}
</style>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</h:head>
<h:body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h:form>
<div class="form-group">
<label for="nom">Nom :</label>
<h:inputText id="nom" class="form-control" value="#{student.firstname}" label="Nom" required="true" requiredMessage="Veuillez entrer votre nom"/>
<h:message for="nom" class="text-danger"/>
</div>
<div class="form-group">
<label for="prenom">Prénom :</label>
<h:inputText class="form-control" id="prenom" value="#{student.lastname}" label="Prénom" required="true" requiredMessage="Veuillez entrer votre prénom"/>
<h:message for="prenom" class="text-danger"/>
</div>
<div class="form-group">
<label for="email">Email :</label>
<h:inputText class="form-control" id="email" value="#{student.email}" label="Email">
<f:validateLength minimum="10" maximum="20"/>
</h:inputText>
<h:message for="email" class="text-danger"/>
</div>
<div class="form-group">
<label for="passe">Mot de passe :</label>
<h:inputText class="form-control" id="passe" value="#{student.passe}" label="Mot de passe">
<f:validateLength minimum="0" maximum="10"/>
</h:inputText>
<h:message for="passe" class="text-danger"/>
</div>
<div class="form-group">
<label for="tel">Téléphone :</label>
<h:inputText class="form-control" id="tel" value="#{student.phone}" label="Téléphone" validatorMessage="Le numéro de téléphone doit respecter le schema suivant : xx-xx-xx-xx-xx">
<f:validateRegex pattern="\d{2}-\d{2}-\d{2}-\d{2}-\d{2}"/>
</h:inputText>
<h:message for="tel" class="text-danger"/>
</div>
<div class="form-group">
<h:commandButton value="Valider" class="btn btn-success" action="reponse"></h:commandButton>
</div>
</h:form>
</div>
</div>
</div>
</h:body>
</html>
2- الملف Student.java
فالمجلد Java Resources كنزيد package جديد سميه form.validation زيد فيه ملف جديد عبارة عن java class فيه غادي نخزنو المعلومات الخاصة بكل Student فعندنا المعلومات على شكل des variables و كاين ل constructeur ولgetters وsetters الكود ديال الملف هو:
package form.validation;
import javax.faces.bean.ManagedBean;
@ManagedBean
public class Student {
private String firstname;
private String lastname;
private String email;
private String passe;
private String phone;
public Student() {
}
public String getFirstname() {
return firstname;
}
public void setFirstname(String firstname) {
this.firstname = firstname;
}
public String getLastname() {
return lastname;
}
public void setLastname(String lastname) {
this.lastname = lastname;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPasse() {
return passe;
}
public void setPasse(String passe) {
this.passe = passe;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
}
3- الملف reponse.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:a="http://xmlns.jcp.org/jsf/facelets" >
<h:head>
<title>Form Validation</title>
<style>
.container{
margin-top:30px;
}
</style>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</h:head>
<h:body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ul class="list-group">
<li class="list-group-item">
<span class="text-info">Nom: </span> #{student.firstname}
</li>
<li class="list-group-item">
<span class="text-info">Prénom : </span> #{student.lastname}
</li>
<li class="list-group-item">
<span class="text-info">Email : </span> #{student.email}
</li>
<li class="list-group-item">
<span class="text-info">Mot de passe : </span> #{student.passe}
</li>
<li class="list-group-item">
<span class="text-info">Téléphone : </span> #{student.phone}
</li>
</ul>
</div>
</div>
</div>
</h:body>
</html>