DropDownList and Validator

[antonomaseParticipant]

Hi,

I have a form with many fields and a lot of jqxValidator rules.
I put rules “required” on some jqxDropDownList and jqxComboBox with jqxValidator.

But when a dropdown or a combobox is set to a value, the jqxValidator do not detect it and display the required message.

$("#combobox").jqxComboBox({ width: 200, theme: theme, source: datacommune, dropDownHeight: 300, dropDownWidth: 500, autoComplete: true, displayMember:"label", valueMember: "code"});
	
$('#jqxform').jqxValidator({
 rules: [
  { input: '#combobox', message: "Combo required", action: 'keyup, blur', rule: 'required' }
 ],
theme: theme
});

$('#btnsave').on('click', function () {
  alert($("#combobox").val());
  $('#jqxform').jqxValidator('validate');
});

the save button :
– display the value in the combobox
– display the message “Combo required”

Why ?
Thanks

[Peter StoevKeymaster]

Hi antonomase,

I do not think that “required” when using ComboBox stands for – change ComboBox selection. According to me, you should use custom rule function if your intention is to validate the widget when the user selected or not selected a ComboBox item. May be also the “action” should be “change”, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[antonomaseParticipant]

Hi Peter,

My users have to type an address with a field ‘city’ which must be in a list of 2200 authorized cities. This field is required.
It is more easy to have a combobox than a very long dropdown.

But if I use a jqxDropDownList, I have the same problem : the validator do not detect that the user has chosen a city in the list.

I resolve part of the problem with

{ input: '#combobox', message: "Combo required", action: 'change, keyup, blur', rule: function () {if ($('#combobox').val() > 0) { return true; } else { return false; }} }

But if the user cleans the field or retype without choosing a value, the last value remains in val(). I have to manage that.

Best regards

[antonomaseParticipant]

The code to detect if the user retype a value or clear the field : the val is unset so the validation rule can run.

$('#combobox').on('change', function (event) {
  var args = event.args;
  if (typeof args === 'undefined') {
   var index = $("#combobox").jqxComboBox('getSelectedIndex'); 
   if (index >= 0) { $("#combobox").jqxComboBox('unselectIndex', index ); }
 }
}); 	

Perhaps for the future versions of Combobox… 🙂

an event when the user types in the box
and a property which indicates if the text in the box matches or not an item in the list

[Peter StoevKeymaster]

Hi antonomase,

“change” event is raised on Blur, not when the user types something. If you want to do some specific actions when the user types, I suppose that you can select with jQuery the ComboBox’s INPUT tag and bind to the “keydown” event.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts