simple textbox validation in <rich:modalPanel> using JavaScript
I have a with a textbox and which submits the modalPanel.
On Click of the button, I want to check if the text box has been filled through a JavaScript Function.
Any suggestions..??
Here is the code: For the modalPanel--
<h:form id="theForm">
<rich:modalPanel id="diskPanel" width="350" height="250">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Create New Disk"></h:outputText>
</h:panelGroup>
</f:facet>
<h:panelGrid columns="2" width="70%">
<h:outputLabel value="Disk Name* :" />
<h:inputText value="#{myform.newDiskName}" id="diskPanel_diskName"/>
<h:commandButton value="Create-Attach" id="submit_disk"
onclick="return validateDiskPanel()"
action="#{myform.cloudButtonActionRequest('newdisk')}">
<rich:componentControl for="diskPanel" attachTo="submit_disk"
operation="hide" event="onclick" />
</h:commandButton>
</h:panelGrid>
</rich:modalPanel>
</h:theForm>
Code For the JavaScript Function---
function validateDiskPanel(){ var obj1 = document.getElementById("theFo开发者_运维知识库rm:diskPanel_diskName"); var obj2 = document.getElementById("theForm:diskPanel_diskSize"); if(obj1 == ""){ alert("Please provide Disk Name"); Richfaces.showModalPanel('diskPanel'); return false; } return true; }The easier way to do this is using the required
prop. and a h:message
or rich:message
(or h:messages / rich:messages for global messages) on your textbox.
Example:
<h:inputText label="Job" id="box" required="true" value="#{bean.prop}"/>
<rich:message for="box"/>
More especific example here.
If you dont want to use required, check options under Ajax Validators tab at the livedemo site, like rich:ajaxValidator as @niksvp said.
Use <rich:ajaxValidator>
.
Here is the example.
Else if you are rigid to use javascript validation then don't use <rich:componentControl>
as the panel will hide on page reload for successful submission.
精彩评论