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>
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
Hello Paruchuri Nagaraju,
Let us know if we may be of further assistance.
Thank you for your reply.
Could you please explain me what do you mean by saying "HTML after the validation"? You can use any web development tool like firebug (of Firefox) or developer tool (of Chrome) and with them to inspect the DOM and see the rendered html. It would be highly appreciated also if you could share with us did you managed to run the provided sample from my previous reply, and if so, do you find it helpful?
Looking forward for your reply.
Can you send me the HTML after the validation happend?
Thank you for the provided details.
I have created isolated sample for you that is showing how to use the jquery validation library in order to set validation to our igCombo widget. As you will see from the provided sample I am using separate error message container which will be used to show the Required message below the combo. I hope that you will benefit from the sample and you will achieve your goals.
Code snippet:
Let me know if I may be of further assistance.
Looking forward to hearing from you.