Nitobi
Customer Login
Services
Products
About
Blogs
Contact
Home -> Product Knowledgebase Order Online | Free Trial Downloads

Nitobi Product Knowledgebase

How do I perform validation on a combobox?


Validation means different things to different customers. Some people want to validate the entry against some custom business rules, while others merely want to check the inputted value against the list data. Some people want validation to occur whenever focus is lost, others only want it when there is a value in the text box.

We provide the basic mechanism to do validation, and a template for how it might be achieved. This tutorial shows one way of achieving validation.

In this tutorial we bind a custom JavaScript validation function to the OnBlurEvent. Whenever focus is lost, we loop through the list data to see if the value appears in the local list. If not, then execute some other JavaScript. You can adapt this function to suite your needs.

Our validation function will take the following form:

function ValidateCombobox(ComboID, DataFieldIndex, PassResultJS, FailResultJS)
  • ComboID = (string) The ID of your combobox.
  • DataFieldIndex = (int) The column of data to validate against.
  • PassResultJS = (string) Some JavaScript to execute if validation passes. Leave an empty string to do nothing.
  • FailResultJS = (string) Some JavaScript to execute if validation fails. Leave an empty string to do nothing.

We will call our validation function in the onblur event. When validation passes we will have it do nothing, but when it fails, display an alert box with the word "Fail" in it. Here is our full Combo tag:

<ntb:Combo id="myCombo" Mode="unbound" OnBlurEvent="ValidateCombobox("myCombo", 0, "", "alert("Fail");")" >
 <ntb:ComboTextBox  DataFieldIndex=0 ></ntb:ComboTextBox>
 <ntb:ComboList Width="200px" >
 <ntb:ComboColumnDefinition Width="100px" DataFieldIndex=0></ntb:ComboColumnDefinition>
 <ntb:ComboColumnDefinition Width="70px" DataFieldIndex=1></ntb:ComboColumnDefinition>
 </ntb:ComboList>
   <ntb:ComboValues fields="City|Population">
     <ntb:ComboValue a="Vancouver" b="3,000" ></ntb:ComboValue>
     <ntb:ComboValue a="Toronto" b="4,500" ></ntb:ComboValue>
     <ntb:ComboValue a="Ottawa" b="1,000" ></ntb:ComboValue>
     <ntb:ComboValue a="California" b="4,500" ></ntb:ComboValue>
     <ntb:ComboValue a="Halifax" b="900" ></ntb:ComboValue>
     <ntb:ComboValue a="Calgary" b="1,500" ></ntb:ComboValue>
     <ntb:ComboValue a="Red Deer" b="100" ></ntb:ComboValue>
     <ntb:ComboValue a="Spuzzum" b="200" ></ntb:ComboValue>
     <ntb:ComboValue a="Portland" b="1,500" ></ntb:ComboValue>
     <ntb:ComboValue a="Atlanta" b="4,500" ></ntb:ComboValue>
  </ntb:ComboValues>
</ntb:Combo>  

And now here is our validation function. It looks at the typed or selected value and compares it against all the values in the combobox in the DataFieldIndex column.

function ValidateCombobox(ComboID, DataFieldIndex, PassResultJS, FailResultJS)
{
 var ComboObj = $(ComboID).jsObject;
 
 var ComboValue = ComboObj.GetTextValue();
 
 var ComboRowCount = ComboObj.GetList().GetXmlDataSource().GetNumberRows();
 
 var ComboColCount = ComboObj.GetList().GetXmlDataSource().GetNumberColumns();

 var IsItemInList = false;
 
 for (i = 0; i < ComboRowCount; i++)
 {
  if (ComboValue == ComboObj.GetList().GetXmlDataSource().GetRow(i)[DataFieldIndex])
   IsItemInList = true;
 }

 if (IsItemInList)
 {
  eval(PassResultJS);
 } else
 {
  eval(FailResultJS);
 }
 
}

Click here for a demo. Click here to download this demo.

Related Articles

View Printable Version

Comments:


Name:

Type the text you see above:

Comments:


Knowledgebase

To be notified of new articles when they're available, subscribe to our RSS feed.

Support Resources

Take advantage of our knowledgebase of product tutorials and tips, and our support forums!

Search Site


Sign up for our Newsletter:

Get industry articles and Nitobi company news in your inbox every couple of months — here's a sample!

Email:




Site RSS Feed  | All contents are (c) Copyright 2006, Nitobi Software Inc. All rights Reserved