I am trying to do client side input validation with little PrimeFaces and JavaScript.
The code suppose to warn user with p:message component but the warning appears and the page refreshes.
How can I prevent the error message from being disappear?
XHTML:
Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Registration</title>
<script>
function validateEmail() {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var email = $.trim($(PrimeFaces.escapeClientId("userForm:email"))
.val());
if (email === '') {
$(PrimeFaces.escapeClientId("userForm:emailMsg")).text("");
$(PrimeFaces.escapeClientId("userForm:emailMsg")).attr("class", "");
return;
}
if (emailReg.test(email)) {
$(PrimeFaces.escapeClientId("userForm:emailMsg")).text("Valid Email");
$(PrimeFaces.escapeClientId("userForm:emailMsg")).attr("class", "ui-messages-info ui-widget " +
"ui-corner-all ui-messages-info-summary");
} else {
$(PrimeFaces.escapeClientId("userForm:emailMsg")).text("Invalid Email");
$(PrimeFaces.escapeClientId("userForm:emailMsg")).attr("class", "ui-message-error " +
"ui-widget ui-corner-all ui-message-error-detail");
}
}
</script>
</h:head>
<body>
<h:form id="userForm">
<p:messages/>
<p:outputLabel value="Email:"/>
<p:inputText id="email" value="#{userController.registrationUser.email}" onchange="validateEmail();"/>
<p:message id="emailMsg" for="email"/>
</h:form>
</body>
</html>
Code: Select all
package beans;
import domain.User;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;
@ManagedBean
@RequestScoped
public class UserController
{
private User registrationUser;
public UserController() {
this.registrationUser = new User();
}
//Getters & Setters
}
Code: Select all
public class User {
private Integer id;
private String userName;
private String password;
private String firstName;
private String lastName;
private String email;
private String phone;
public User() {
}
//Getters & Setters
}