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>

Parents

20255

Offline Zdravko Kolev posted over 9 years ago

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

Cancel
385

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

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

Cancel
11674

Ambrose Little posted over 9 years ago in reply to Paruchuri Nagaraju

Paruchuri, can you tell me what jQuery validation framework you are using?
Cancel
Reply

Cancel
385

Offline Paruchuri Nagaraju posted over 9 years ago in reply to Ambrose Little

I am using jquery.validate.min.js,jquery.validate.js for required validations.
Cancel
Reply

Cancel
20255

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

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:

<script>

        $.validator.setDefaults({

            submitHandler: function () {

                alert("submitted!");

            }

        });

        $().ready(function () {

            // validate the comment form when it is submitted

            $("#firstForm").validate(

                {

                    errorLabelContainer: $("#firstForm div.error")

                }

            );

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

        });

        $(function () {

            var colors = [{ "Name": "red" },

                            { "Name": "blue" },

                            { "Name": "green" }];

            $("#checkboxSelectCombo").igCombo({

                width: "270px",

                dataSource: colors,

                textKey: "Name",

                valueKey: "Name"

            });

            $(".ui-igcombo-field").rules("add", {

                required: true,

                messages: {

                    required: "Required input"

                }

            });

            $("#field").rules("add", {

                required: true,

                messages: {

                    required: "Required input"

                }

            });

        });

    script>

Let me know if I may be of further assistance.

Looking forward to hearing from you.
demo.zip
Cancel
Reply

Cancel
385

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

Hi,

Can you send me the HTML after the validation happend?
Cancel
Reply

Cancel

Reply

20255

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

Hello Paruchuri Nagaraju,

Let us know if we may be of further assistance.
Cancel
Reply

Cancel

Children

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