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?
I have suggested you what is the recommended approach, as you can see from the sample implementing our igValidator, the validation is handled fine, so could you please consider to start using our validatior or atleast give it a try.
Thank you.
Paruchuri, can you tell me what jQuery validation framework you are using?
I am using jquery.validate.min.js,jquery.validate.js for required validations.