igCombo required validation is overlapping with the control because of hidden input element.

385

Paruchuri Nagaraju posted over 9 years ago

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.

<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>

20255

Offline Zdravko Kolev posted over 9 years ago in reply to Zdravko Kolev

Hello,

Could you please let me know if I may be of further assistance.
Cancel
Reply

Cancel
20255

Offline Zdravko Kolev posted over 9 years ago in reply to Paruchuri Nagaraju
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:

$().ready(function () {

            // validate the comment form when it is submitted

            $("#firstForm").validate(

                {

                    errorPlacement: function (error, element) {

                        if (element.attr("name") === undefined) {

                            error.insertAfter("#firstForm div.error");

                        } else {

                            error.insertAfter(element);

                        }

                    }

                }

            );



            $("#secondForm").validate();

        });
jquery-validation-library-example.zip
Cancel
Reply

Cancel
385

Offline Paruchuri Nagaraju posted over 9 years ago in reply to Zdravko Kolev

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.
Cancel
Reply

Cancel
20255

Offline Zdravko Kolev posted over 9 years ago in reply to Paruchuri Nagaraju
In addition, below you can find in bold the exact change that I've made. Also the modified sample is attached.

$("#checkboxSelectCombo").igCombo({

                width: "270px",

                height : "25px",

                dataSource: colors,

                textKey: "Name",

                valueKey: "Name"

            });
jquery-validation-library-example.zip
Cancel
Reply

Cancel
20255

Offline Zdravko Kolev posted over 9 years ago in reply to Paruchuri Nagaraju

Hello,

I've tried your suggestion, although the overlapping doesn't appear.
Cancel
Reply

Cancel