Empty text Field Validation in JSF data Table

[Vaibhav Purani]

Hi
i am new to Java n JSF
i need to have the validation for JSF datatable so that it shows a POPup or a message when any blank field is submitted

following is my JSF datatable

  <t:dataTable id="dataTableId" renderedIfEmpty="true" columnClasses="columnborder" value="#{actionBeanAction.actionBeanList}" 
 preserveSort="false"   var="document" rendered="true" cellspacing="0" cellpadding="2" width="705" styleClass="col">
<h:column>
<f:facet name="header">
<h:outputText value="Select" />
</f:facet>
<h:selectOneRadio immediate="true" rendered="#{not document.editable}">
<f:selectItem itemValue="#{document.BO.id}" itemLabel="#{actionBeanAction.emptyField}" />
<a4j:support event="onclick" onsubmit="selectOne(this.form,this);" />
</h:selectOneRadio>

<h:selectOneRadio rendered="#{document.editable}" disabled="true">
<f:selectItem itemValue="" itemLabel=""/>
</h:selectOneRadio>
<h:inputHidden  id="editId" value="#{document.editable}" />
</h:column>

<t:column>
<f:facet name="header">
<h:outputText value="name 1" />
</f:facet>
<h:inputText value="" title="test" id="name1"
rendered="#{document.editable}" size="15" align="center" styleClass="input_s" >
<f:validateLength minimum="1" />
</h:inputText>
<h:outputText value="#{document.BO.name}"
rendered="#{not document.editable}" />
</t:column>

<t:column style="text-align:right">
<f:facet name="header">
<h:outputText value="number1" />
</f:facet>
<h:inputText id="n1" value="#{document.BO.numbera}" 
rendered="#{document.editable}" size="5" align="center" styleClass="select_1"  >
<f:validateLongRange minimum="0" maximum="10000000"/>
<f:validateLength minimum="1" />
</h:inputText>
<h:outputText value="#{document.BO.numbera}"
rendered="#{not document.editable}"/>
</t:column>

<t:column >
<f:facet name="header">
<h:outputText value="number2"/>
</f:facet>
<h:inputText id="n2" value="#{document.BO.numberb}"
rendered="#{document.editable}" size="10" align="center" styleClass="select_1">
<f:validateLength minimum="1" />
</h:inputText>
<h:outputText value="#{document.BO.numberb}"
rendered="#{not document.editable}" />
</t:column>
<t:column >
<f:facet name="header">
<h:outputText value="number3"/>
</f:facet>
<h:inputText id="n3" value="#{document.BO.numberc}" 
rendered="#{document.editable}" size="10" align="center" styleClass="select_1">
<f:validateLength minimum="1" />
</h:inputText>
<h:outputText value="#{document.BO.numberc}"
rendered="#{not document.editable}" />
</t:column>
<t:column>
<f:facet name="header">
<h:outputText value="number4" />
</f:facet>
<h:inputText id="n4" value="#{document.BO.numberd}" 
rendered="#{document.editable}" size="10" align="center" styleClass="select_1">
<f:validateLength minimum="1" /></h:inputText>
<h:outputText value="#{document.BO.numberd}"
rendered="#{not document.editable}" />
</t:column>
</t:dataTable>  

please help me with this
Thanks in ADvance

[Bob Good]

add required="true" for the required field.

add a message tag after the field:

    
<h:message id="message1" for="yourfieldid"></h:message>

[Vaibhav Purani]

Thanks a Ton BOB
that really helped

now what if i want a PopUp to be generated in the same scenario.

thank you again in Advance

[Darryl Nortje]

Have you tried Javascript?

if (document.fieldName == "") {
alert("Please fill field x in...");
return false;
}


something like that...

[Vaibhav Purani]

Hi Darryl
yes i have tried a java script also
but the thing is when i add rows to the datatable each row generates its own id to
hence

var x =document.getElementById('form:table:fieldId')    

doesnt work
instead

var x = document.getElementById('form:table:i:fieldId')  

works when i hardcode "i" where i= the row integer

[Darryl Nortje]

You got me there. I'm not so sure I understand exactly what you want to do though. you have a dataTable. It has lots of rows. A user can change values across all the rows in the dataTable, and when he/she submits the form, the entire dataTable needs to be validated. And you want this done with popUps...? Is that correct?

[Vaibhav Purani]

hi Darryl
yes you got my requirements to the point.
the popup should appear only if any of the field is empty in that datatable

thanks a lot

[Bob Good]

You may want to trigger the javascript popup 'onblur' for each field (popup when they leave the field if it is blank). Might be kind of annoying though.

If you do it on form submit (onclick), then you will get 1 popup if there are ANY empty fields...I would guess.

[Bob Good]

Another more subtle thing you can do is use cascading style sheet to turn he field red if it is blank (onblur). That will altert them in a subtle way in real time that there is something wrong.

[Vaibhav Purani]

hi BOB
thanks
i have done the needful but i dont want it to submit to the database any of the field is blank

[Bob Good]

Yes, keep the edit, just give them subtle hints too as they are typing and tabbing.

[Vaibhav Purani]

hi BoB
thanks for the reply
but then if i have to use a popup then what can i do
because the java script demands a dyanamic rowindex value
which i am unable to provide..

thanks a lot in advance

[A. Dusi]

You can still pass the rowIndex into the javascript arguments like this:
Have this in your datatable:

  rowIndexVar = "rowIndex"  

And
have this in your javascript call:

  on click = callMyScript(#{rowIndex})