HI
I am using Jquery validation frame work for doing the required field validation for combobox. Below is the infragistics rendered html and it has hidden input element(I believe this has been added for applying the validations), My validation happend on that input element and label displayed next to that element, Due to this error label got over lapped with the actual control. Can you please tell me what is the solution to get the error message properly displayed.
<span data-resourcekey="ENTERAUSERNAME" data-resourcevalue="" data-controlid="11789" data-controltype="igCombo" data-datatype="A" id="AssignUserComboBox" class="ui-igcombo ui-state-default ui-widget ui-corner-all" style="overflow: hidden; display: inline-block; position: relative; width: 100%; height: 23px; min-width: 39px; min-height: 0px;">
<input name="AssignUserComboBox" type="hidden" data-rule-required="true" data-msg-required="You forgot to enter a username." value="" aria-required="true" class=""><label for="AssignUserComboBox" class="error" style="display: none;">You forgot to enter a username.</label>
<span class="ui-igcombo-fieldholder ui-igcombo-fieldholder-ltr ui-corner-left" style="float: left; position: absolute; width: 96.94244604316546%; height: 21px; background: rgb(255, 255, 255);"><input class="ui-igcombo-field ui-corner-all valid" style="float: left; position: absolute; width: 99.81447124304268%; height: 19px; display: block;" aria-invalid="false"><span class="ui-igcombo-clear" data-id="2" tabindex="-1" unselectable="on" title="Clear value" longdesc="Clear value" style="float: right; outline: 0px; display: none; height: 21px;"><span class="ui-igcombo-clearicon ui-icon-circle-close ui-icon" tabindex="-1" unselectable="on" style="outline: 0px; margin-top: 3px;"></span></span></span><span class="ui-igcombo-button ui-state-default ui-igcombo-button-ltr ui-corner-right" data-id="1" tabindex="-1" unselectable="on" title="Show drop-down" longdesc="Show drop-down" style="float: right; outline: 0px; height: 21px;"><span class="ui-igcombo-buttonicon ui-icon-triangle-1-s ui-icon" tabindex="-1" unselectable="on" style="outline: 0px; margin-top: 3px;"></span></span></span>
Hello,
Thank you for contacting us.
If you want to apply some validation to our igCombo or any other IgniteUI widget it is recommended to use the igValidator control which provides validation support for the array of IgniteUI editor controls.
More information about igValidator you can find here:
https://www.igniteui.com/help/api/2014.2/ui.igvalidator#overview
In order to add validation setting to the combo you will need to change its validatorOptions:
https://www.igniteui.com/help/api/2014.2/ui.igcombo#options:validatorOptions
I have created a sample for you in order to show you simple combo validation implementation:
http://jsfiddle.net/zdravko/umrjfhfk/3/
Let me know if I may be of further assistance.
Right now in our application we are using Jquery validation framework for doing these validations. I am looking for a solution from that perspective only.Can you please tell me why that input hidden element is being added? Is it for the purpose of validations only?
Hi,
Sorry for the late replay.
Can you check the above sample by setting the height property to some value ,in my case it is 25. I believe when you set the height for igCombo, validation message will get overlap with the actual control.
Thanks & Regards
Nagaraju P
In addition, below you can find in bold the exact change that I've made. Also the modified sample is attached.
Thanks for the replay,
I have one more question, what if I have text box and combo box in a single form, then how to call validate () on form.
Hello Paruchuri,
I hope I understand you correctly, if not could you please let me know. You want to submit two html elements (igCombo and input for example) on submit button click. In that case my suggestion is to customize a little bit validate function implementation. You can check if the element, which error message will be displayed, is undefined and if it is, to append the error message to the input element of the igCombo, if it is not, insert it after the 'element' which is passed as parameter.
You can find a code snippet and the modified sample below.
Code snippet:
Could you please let me know if I may be of further assistance.