How to validate listbox such that at least one option within it is selected?

vsoman1984

Hi All,

I have run into one more validations i need to implement lest the error throws up on my console.

I have a list box

<tr><td align="right">
<dmf:listbox width="180" name="<%=DummyComponent.TARLANG_LISTBOX_CONTROL_NAME%>" size='5' multiselect='true' cssclass='BrowseNumberList' onselect="getListBoxSelectedValues" runatclient='true' id='searchlistbox'>

<dmf:option id = "item1" value="fr-fr" label="French(France)" />
<dmf:option id = "item2" value="zh-cn" label="Chinese(Simplified)" />

<dmf:option id = "item3" value="zh-cn1" label="Chinese(Simplified)1" />

<dmf:option id = "item4" value="zh-cn2" label="Chinese(Simplified)2" />

...

</td></tr>

Now prior to the click on a link on the page (which carries the user selected values), i need to confirm that the user has selected at least one Target language from the above listbox.

I have searched and found a tag as seen below which forces an upperlimi to the number of selections that can be made.I tried the same example on my Page but even the upperlimit test did not work. I was able to select more than 3 options.

<dmf:listbox name="colors" size="7" multiselect="true">
  <dmf:option value="1" label="Red"/>
  <dmf:option value="2" label="Orange"/>
  <dmf:option value="3" label="Yellow"/>
  <dmf:option value="4" label="Green"/>
  <dmf:option value="5" label="Blue"/>
  <dmf:option value="6" label="Indigo"/>
  <dmf:option value="7" label="Violet"/>
</dmf:listbox>

<bfval:listboxselectlimitvalidator
   name="val_limitselection_colors"
   controltovalidate="colors"
   errormessage="You can't select more than three options."/>
   maxselected="3"
   validateatclient="true"
   displayclientalert="true"

My Question is whether there exists a validator using which i can enforce the lower limit i.e. urge the user to select at least one listbox option befor the final click? I have no such issues with dropdownboxes because they select the default value if nothing is particularly selected by the user.

Looking forward for your help

Thanks & Regards

Vishnu

Find more posts tagged with

Comments

dnvhariprasad

What I can suggest for your requirement is:

In your submit button (or link), implement runatclient=true.

and add click handler in the javascript.

In the javascript code, do the validation like no. of objects selected. If your condition satisifies then use postserverevent() to perform server side validation and business logic.

Please let me know if you need any more information..

vsoman1984

Hi Hari,

Once again thank you for your response.

I am carrying out the javascript option you have mentioned. But are there no listbox specific validations in WDK like we have for requiredfiled input mask validator etc? The reason for asking this is that the Javascript based validations are bound to fail if the Javascript is disabled on the client side.

Thank You

dnvhariprasad

I dont know of any validators to implement for listbox.

You can create your custom validator to implement this.

PS: If javascript is disabled at the client side, many of the webtop functions will not work. To webtop run properly user should not disable javascript in the browser.

vsoman1984

Hi Hari,

With your clarification i am convinced that Javascript is the most suitable way to proceed for validation w.r.t Listbox. I already have the javascript for the JSP to access user selected values.

As a result i would like to ask 2 things.

1) If i am trying to bypass validation by making a default listbox option checked. How can this be done inside <dmf:listbox?

2) I have the below given javascript already employed:

<script>
function getListBoxSelectedValues ()
{
var newText = "";
var option = document.forms[0].searchlistbox.options;
for (var j = 0; j < option.length; j++)
{
if (option[j].selected)
{
if (newText != "")
{
newText += "<%=strDocbaseSearchPathSeparator%>";
}
newText += document.forms[0].searchlistbox.options[j].value;
}
}
document.forms[0].listBoxSelectedValues.value = newText;
}
</script>

The following is the hidden field i use to access listbox options

<dmf:hidden name="<%=DummyComponent.CONTROL_LISTBOX_SELECTED_VALUESF%>" id="listBoxSelectedValues"/>

and the above name is used in my java class as follows

public static final String CONTROL_LISTBOX_SELECTED_VALUESF = "listBoxSelectedValues";

private String[] readTarLanguages() { Hidden hidden = (Hidden) getControl("listBoxSelectedValues"); if (hidden != null) { String strSelectedValues = hidden.getValue();

if ((strSelectedValues != null) && (strSelectedValues.length() > 0)) { tabValues = StringUtil.split(strSelectedValues, "//"); for (int i = 0; i < tabValues.length; ++i) { System.out.println("This is " + i +" th value for TargetLanguage" + tabValues[i]); }

}

return tabValues; }

And the final link on my JSP which passes user entered values to the Java class is this:The "onClickSendToFunction" is a method inside my Java class

<dmf:link nlsid ='MSG_SEND_FUNCTION' onclick="onClickSendToFunction" focus="true"/>

Pardon me for all the code here. But it will be a great start for me with Javascript as i am new to it as i am to Java.

With all these parts at hand i am still unsure where to have an alert to be placed and employed so that when the user clicks on the 'MSG_SEND_FUNCTION' link above without selecting any listbox values.

Really appreciate your support.

Thank You

dnvhariprasad

modify the control onClickSendToFunction to runatclient=true

create javascript function for this control.

In the javascript, access the values of document.forms[0].listBoxSelectedValues.value.

count the values in the above returned value. If it is less than 1, then display alert.

If it is greater than 1, call postserverevent()

vsoman1984

Hi Hari

I made the following changes as sugested by u

1) Changed the function name on the link

<script>
function onClickSendToFunctionJavaScript()
{
var newTextA = "";
document.forms[0].listBoxSelectedValues.value = newTextA;<dmf:link nlsid ='MSG_SEND_FUNCTION' onclick="

if (newTextA == null)

{alert ("Please select Target Language");}
else
postserverevent(null,null,null,onClickSendToFunction);

)


}
</script>

This

onClickSendToFunction is inside my class

Still i am getting javascript error popup (not alert) when i select any option from the listbox. I hope that is because 
of some syntax issue.
But is my approach at creating the javascript function proper?
Thank You