After clicking the submit button, it is not hitting my managed bean, but it is not displaying the validation message either. I feel like this is very simple and do not know why it would not be working.
<h:form prependId="false">
<table class="contactForm">
<tr>
<td>Name: </td>
<td><p:inputText size="20" id="name" value="#{contactManagedBean.name}" required="true" requiredMessage="Name is required" /></td>
<td><p:message for="name" /></td>
</tr>
<tr>
<td>Email: </td>
<td><p:inputText size="20" id="email" value="#{contactManagedBean.email}" required="true" requiredMessage="Email is required" /></td>
<td><p:message for="email" /></td>
</tr>
<tr>
<td>Phone (###-###-####) (Optional): </td>
<td><p:inputText size="20" id="phone" maxlength="12" value="#{contactManagedBean.phone}"/></td>
<td><p:message for="phone" /></td>
</tr>
<tr>
<td>Comments: </td>
<td><p:inputTextarea rows="5" cols="30" id="comments" value="#{contactManagedBean.comments}" required="true" requiredMessage="Please enter some comments"></p:inputTextarea></td>
<td><p:message for="comments" /></td>
</tr>
<tr>
<td colspan="3" style="text-align: center;"><p:commandButton value="Submit" actionListener="#{contactManagedBean.submitComment()}" /></td>
</tr>
</table>
</h:form>
add id to h:form and add update attribute to button.
ex:
<h:form id="form">
...
<p:commandButton value="Submit" update="form" actionListener="#{contactManagedBean.submitComment()}" />
</h:form>
Related
I used an input text, upload file and command button properties.My File upload mode is basic.In command button i made ajax=false.I used required=true in both the fields.While clicking save with empty fields, corresponding method is executing and message is displaying in console, but error message is not displaying in UI.
<p:dialog widgetVar="addDialogWidgetVar" id="addDialogWidgetVarId" dynamic="true" >
<table style="width: 100%;">
<tr>
<td>
<p:messages for="errorMsgId" id="errorMsgId" autoUpdate="true" showDetail="false" showSummary="true" closable="true"/>
</td>
</tr>
</table>
<h:form id="formId" enctype="multipart/form-data">
<table>
<tr>
<td>
<label style="margin-top: 5%"><h:outputText value="Name:"/><h:outputText value="*" style="color:red"/></label>
</td>
<td width="10%"/>
<td>
<p:inputText value="#{manageBean.attachment.fileName}" id="fileNameId" maxlength="60" style="width:70"
required="#{not empty param[save.clientId]}" requiredMessage="Please enter Attachment name"></p:inputText>
</td>
</tr>
<tr height="10"></tr>
<tr>
<td>
<label style="margin-top: 5%"><h:outputText value="Upload Attachment:"/><h:outputText value="*" style="color:red"/></label>
</td>
<td width="10%"/>
<td>
<p:fileUpload label="Select a file" mode="simple" value="#{manageBean.attachment.file}"
allowTypes="/(\.|\/)(pdf|doc|docx|xls|xlsx|gif|jpg|jpeg|png|PNG|GIF|JPG|JPEG)$/"
invalidFileMessage="Allow only (pdf|doc|docx|xls|xlsx|gif|jpg|jpeg|png|PNG|GIF|JPG|JPEG) file."
multiple="false" required="#{not empty param[save.clientId]}" requiredMessage="Please select a file" >
</p:fileUpload>
</td>
</tr>
</table>
<br />
<table style="margin-left: 30%;">
<tr align="center">
<td>
<p:commandButton value="Close" actionListener="#{manageBean.cancelAttachment}" oncomplete="addDialogWidgetVar.hide()" />
</td>
<td>
<p:commandButton id="submitbtnid" value="Save" ajax="false" binding="#{save}"
actionListener="#{manageBean.saveAttachment}" update=":errorMsgId"/>
</td>
</tr>
</table>
</h:form>
</p:dialog>
Try do submit without ajax for test, and also put p:growl in the page, try get messages without update messages component and find bug.
i have an issue with using p:messages so i am trying to use p:message for each component as follows:
<div style="position: relative;">
<h:panelGrid id="messages" columns="1">
<p:message for="idTxtFirstName" id="msgFirstName" />
<p:message for="idTxtLastName" id="msgLastName" />
<p:message for="idTxtTitle" id="msgTitle" />
<p:message for="idTxtCompany" id="msgCompany" />
<p:message for="idTxtEmail" id="msgEmail" />
<p:message for="idTxtPhoneNumber" id="msgPhoneNumber" />
<p:message for="idEstNumOfUser" id="msgEstNumOfUser" />
</h:panelGrid>
</div>
the defaul generated html even if there are any errors is:
<table id="betasignup:messages">
<tbody>
<tr>
<td><div id="betasignup:msgFirstName" aria-live="polite"></div></td>
</tr>
<tr>
<td><div id="betasignup:msgLastName" aria-live="polite"></div></td>
</tr>
<tr>
<td><div id="betasignup:msgTitle" aria-live="polite"></div></td>
</tr>
<tr>
<td><div id="betasignup:msgCompany" aria-live="polite"></div></td>
</tr>
<tr>
<td><div id="betasignup:msgEmail" aria-live="polite"></div></td>
</tr>
<tr>
<td><div id="betasignup:msgPhoneNumber" aria-live="polite"></div></td>
</tr>
<tr>
<td><div id="betasignup:msgEstNumOfUser" aria-live="polite"></div></td>
</tr>
</tbody>
</table>
so i was wondering how to render the message component if only validation fails for the component (not validation fails in general), i mean don't generate any html until there are validation errors only for the related component.
You need to specify the id of the component that should be validated in the message tag. If you want to validate an input for an <p:inputText> it should look like this:
<p:inputText id="inputText" value="#{mrBean.text}"/>
<p:message for="inputText" id="inputTextMessage"/>
Then the message is only rendered if JSF validation fails for the component.
As I see you have chosen other ids in the for of the message. This should be the reason why this does not work.
I'm new to Spring and I've been having some trouble trying to show a form errors.
I have the following form:
<form:form action="loginform.html" commandName="loginForm" onsubmit="goWait();">
<table><tr>
<td>User Name: </td>
<td><form:input path="userName" /></td>
</tr>
<tr>
<td>Password: </td>
<td><form:password path="password"/> </td>
<tr>
<td colspan="2">
<input type="submit" value="Login" style="butt-login">
</td>
</tr>
</table>
</form:form>
The form, as can be seen, is backed by a LoginForm Bean that validates it.
I want to show all the errors from the validation, outside this form. Something like this:
<div>
<ul>
<li><form:errors path="userName"/></li>
<li><form:errors path="password"/></li>
</ul>
</div>
This div should be outside the , so I can't use the tag.
How can I do this?
You could just capture the html produced by form:errors and display it somewhere after the form:
<form:form ...>
<c:set var="err">
<form:errors path="*" element="div" id="err" cssClass="hidden" />
</c:set>
</form:form>
....
<c:out value="${err}" />
If you want to show the errors before the form, you can do that with a bit of jQuery
Yes, you can user form:errors tag outside form:form tag
<form:errors path="yourBindedObject.*" />
<form:form action="loginform.html" commandName="loginForm" onsubmit="goWait();">
<table><tr>
<td>User Name: </td>
<td><form:input path="userName" /></td>
</tr>
<tr>
<td>Password: </td>
<td><form:password path="password"/> </td>
<tr>
<td colspan="2">
<input type="submit" value="Login" style="butt-login">
</td>
</tr>
</table>
</form:form>
If you want to show all errors associated with any fields just pass a star to the path attribute.
<form:errors path="*" />
But if you want to show global error messages just pass an empty string:
<form:errors path="" />
More information related: http://www.mkyong.com/spring-mvc/spring-mvc-form-errors-tag-example/
I want to display the error messages beside the text fields.
I am able to show the error message but all the error messages come at once...
<h:form id="LoginForm">
<table>
<tr>
<td colspan="4" id="login">
<h2 style="border-bottom: 1px solid #CCCCCC;">Login</h2>
<tr>
<td class="label">
<h:outputLabel for="email" value="Login Email:"></h:outputLabel>
</td>
<td class="field">
<h:inputText id="email" size="20" maxlength="70" required="true" requiredMessage="Please enter your email,eg:yourid#domain.com" value="#{loginController.selected1.email}"> <f:validateLength maximum="70"></f:validateLength></h:inputText>
</td>
</tr>
<tr>
<td class="label">
<h:outputLabel for="password" value="Password:"></h:outputLabel>
</td>
<td class="field">
<h:inputSecret id="password" size="20" maxlength="50" required="true" requiredMessage="Please confirm your password" value="#{loginController.selected1.password}"><f:validateLength minimum="6" maximum="50"></h:inputSecret>
</td>
</tr>
</td>
</tr>
<tr>
<td>
<h:commandButton value="Login" type="submit" action="#{loginController.checkValidUser()}"></h:commandButton>
</td>
</tr>
</table>
</h:form>
How to modify the code to show error messages beside the text fields?
Just put a <h:message> right there where you need to see it. E.g.
<tr>
<td class="label">
<h:outputLabel for="email" value="Login Email:"></h:outputLabel>
</td>
<td class="field">
<h:inputText id="email" size="20" maxlength="70" required="true" requiredMessage="Please enter your email,eg:yourid#domain.com" value="#{loginController.selected1.email}"> <f:validateLength maximum="70"></f:validateLength></h:inputText>
<h:message for="email" />
</td>
</tr>
or
<tr>
<td class="label">
<h:outputLabel for="email" value="Login Email:"></h:outputLabel>
</td>
<td class="field">
<h:inputText id="email" size="20" maxlength="70" required="true" requiredMessage="Please enter your email,eg:yourid#domain.com" value="#{loginController.selected1.email}"> <f:validateLength maximum="70"></f:validateLength></h:inputText>
</td>
<td class="message">
<h:message for="email" />
</td>
</tr>
Unrelated to the concrete problem, I suggest to have a look at <h:panelGrid>. It minimizes the ugly HTML table boilerplate. Your code would then end up like follows:
<h:form id="LoginForm">
<h2>Login</h2>
<h:panelGrid columns="3" columnClasses="label,field,message">
<h:outputLabel for="email" value="Login Email:" />
<h:inputText id="email" value="#{loginController.selected1.email}" size="20" maxlength="70" required="true" requiredMessage="Please enter your email,eg:yourid#domain.com">
<f:validateLength maximum="70" />
</h:inputText>
<h:message for="email" />
<h:outputLabel for="password" value="Password:" />
<h:inputSecret id="password" value="#{loginController.selected1.password}" size="20" maxlength="50" required="true" requiredMessage="Please confirm your password">
<f:validateLength minimum="6" maximum="50" />
</h:inputSecret>
<h:message for="password" />
<h:panelGroup />
<h:commandButton value="Login" action="#{loginController.checkValidUser()}" />
<h:panelGroup />
</h:panelGrid>
</h:form>
I am trying to make login with jsf.
I want to hide login panel when user registered.
I did this with jsf ajax.
When I try to do this with primefaces. I am failed.
I triy in jsf ajax like this.
<h:form id="register">
<table style="width: 49%; margin-right: auto; margin-left: auto;">
<tr>
<td colspan="3">
All fields are required.</td>
</tr>
<tr>
<td class="style2" style="height: 51px">Username</td>
<td style="width: 17px; height: 51px;">:</td>
<td class="style3" style="height: 51px"><h:inputText
id="regusername" style="width:155px;height:24px;"
value="#{userRegister.regUser.username}">
</h:inputText></td>
</tr>
<tr>
<td class="style2" style="height: 51px">Name</td>
<td style="width: 17px; height: 51px;">:</td>
<td class="style3" style="height: 51px"><h:inputText
id="regname" style="width:155px;height:24px;"
value="#{userRegister.regUser.name}">
</h:inputText></td>
</tr>
<tr>
<td class="style2" style="height: 51px">Mail</td>
<td style="width: 17px; height: 51px;">:</td>
<td class="style3" style="height: 51px"><h:inputText
id="regmail" style="width:155px;height:24px;"
value="#{userRegister.regUser.mail}">
</h:inputText></td>
</tr>
<tr>
<td class="style2" style="height: 51px">Password</td>
<td style="width: 17px; height: 51px;">:</td>
<td class="style3" style="height: 51px">
<h:inputSecret
id="regpassword" style="width:155px;height:24px;"
value="#{userRegister.regUser.password}">
</h:inputSecret></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="style3"><h:commandButton
style="width:76px;height:26px" value="Clear" type="reset">
</h:commandButton> <h:commandButton style="width:75px;height:26px"
value="Register" action="#{userRegister.register()}"
method="post">
<f:ajax execute="regname regusername regpassword regmail"
render="registermessage" />
</h:commandButton></td>
</tr>
<tr>
<td colspan="3"><h:outputText id="registermessage"
value="#{userRegister.message}"></h:outputText></td>
</tr>
</table>
</h:form>
</h:panelGroup>
<h:panelGroup rendered="#{userLogin.isLoggedin()== true}"
layout="block">
You are already loggedin !!
</h:panelGroup>
When ı try this in primefaces like this:
<p:panel id ="registerPanel" header="User Registration" align="center"
style="text-align:center;">
<table style="width: auto; margin: auto;">
<tr>
<td style="text-align: right;"><h:outputLabel for="regname"
value="Name Surname : * " /></td>
<td style="text-align: left"><p:inputText id="regname"
value="#{userRegister.regUser.name}" size="40" required="true"
label="Name and Surname">
<f:validateLength minimum="2" />
</p:inputText> <p:watermark for="regname" value="Name Surname" /></td>
</tr>
<tr>
<td style="text-align: right" colspan="2"><p:message
for="regname" /></td>
</tr>
<tr>
<td style="text-align: right;"><h:outputLabel
for="regusername" value="Username : * " /></td>
<td style="text-align: left"><p:inputText id="regusername"
value="#{userRegister.regUser.username}" size="40"
required="true" label="Username">
<f:validateLength minimum="3" />
</p:inputText> <p:watermark for="regusername" value="Username" /></td>
</tr>
<tr>
<td style="text-align: riht" colspan="2"><p:message
for="regusername" /></td>
</tr>
<tr>
<td style="text-align: right;"><h:outputLabel for="regmail"
value="E-Mail : * " /></td>
<td style="text-align: left"><p:inputText id="regmail"
value="#{userRegister.regUser.mail}" size="40" required="true"
label="Mail">
<f:validateLength minimum="2" />
</p:inputText> <p:watermark for="regmail" value="mail#example.com" /></td>
</tr>
<tr>
<td style="text-align: right" colspan="2"><p:message
for="regmail" /></td>
</tr>
<tr>
<td style="text-align: right;"><h:outputLabel for="paswword"
value="Password : * " /></td>
<td style="text-align: left"><p:password id="regpassword"
value="#{userRegister.regUser.password}" size="40"
required="true" label="Password">
<f:validateLength minimum="5" />
</p:password> <p:watermark for="regpassword" value="Password" /></td>
</tr>
<tr>
<td style="text-align: left" colspan="2"><p:message
for="regpassword" /></td>
</tr>
<tr>
<td style="text-align: right" colspan="2">
</td>
</tr>
<tr>
<td style="text-align: right" colspan="2">
<p:commandButton value="Clear" image="ui-icon ui-icon-arrowrefresh-1-w"
type="reset"/>
<p:commandButton value="Register" image="ui-icon ui-icon-disk"
action="#{userRegister.register()}" method="post">
<f:ajax
render="registerpaneli" />
</p:commandButton>
</td>
</tr>
</table>
-->
</h:panelGroup>
I registraion panel cant hiden.
What is the problem ?
Remove the
<p:commandButton ....>
<f:ajax render="what-ever">
</p:commandButton>
By
<p:commandButton update="what-ever" ../>
Furthermore, you can read Primefaces' Document and its demo.
Because in Primefaces, most components are compatible with Ajax, especially <p:commandButton/> because it has Ajax turned on by default.
In PrimeFaces, <p:commandButton> already has built-in ajax functionality. You don't need to use <f:ajax>. In fact, <f:ajax> cannot be used with PrimeFaces. If you really need to use it, you must use <p:ajax> instead.
To fix your issue, I think you should change you button like this:
<p:commandButton value="Register" actionListener="#{userRegister.register}" update="registerPanel" />