Validating Combo Input

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 with a Combobox, 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 = nitobi.getComponent('ComboID');
 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);
 }
}
page_revision: 3, last_edited: 1225226988|%e %b %Y, %H:%M %Z (%O ago)
edittags history files print site tools+ options
Unless stated otherwise Content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License