JQuery validation not working for some controls on 2022.1.119

[Tyler]

Hello,

 

I am using JQuery validation to validate a form containing many controls in addition to 2 kendo controls. The checkboxgroup and a radiogroup. 

After updating the project to 2022.1.119 from 2021.1.330 the validation on the form gets the following error:

 

Upon inspecting the error (this is inside of the jquery.validate.js file) i see that for only the two kendo controls, the $(element).rules() is evaluating to undefined and then when line 754 runs it errors because "rules" is nothing

 

My question is what changed to cause this? I only see very small tweaks to the HTML output of the core wrapped controls, im not seeing anything that would cause rules() to evaluate undefined.

 

Here is my JS for the validation setup:

        var validateValue = $("#frmAdditem").validate({
            errorClass: "error fail-alert",
            validClass: "valid success-alert",
            errorPlacement: function (error, element) {
                //Custom position: first name

                if ($(element).attr("name") == "chkAIWork") {
                    $("#lblChkAIWork").text(error[0].innerText);
                }
                else if ($(element).attr("name") == "rdoMatchType") {
                    $("#lblRdoMatchType").text(error[0].innerText);
                }
                else if ($(element).attr("name") == "dpAIReleaseBy") {
                    $("#lbldpAIReleaseBy").text(error[0].innerText);
                }
                else {
                    error.insertAfter(element);
                }
            },
            rules: {
                txtAIPart: {
                    required: true,
                    minlength: 2,
                    maxlength: 100
                },
                txtAIRev: {
                    required: true,
                    maxlength: 10
                },
                chkAIWork: {
                    required: {
                        depends: function (element) {
                            return !$("#chkAIWork").getKendoCheckBoxGroup().value() == '';
                        }
                    }
                },
                rdoMatchType: {
                    required: {
                        depends: function (element) {
                            return $("#rdoMatchType").getKendoRadioGroup().value() == undefined;
                        }
                    }
                },
                ddlAIProjectType: {
                    required: true
                },
                txtAIProj: {
                    required: true,
                    maxlength: 30
                },
                dpAIReleaseBy: {
                    required: true
                }
            },
            messages: {
                txtAIPart: {
                    required: "Part is required",
                    minlength: "Part should be at least 3 characters"
                },
                txtAIRev: {
                    required: "Rev is required"
                },
                chkAIWork: {
                    required: "Work selection is required"
                },
                rdoMatchType: {
                    required: "Match type is required"
                },
                ddlAIProjectType: {
                    required: "Type is required"
                },
                txtAIProj: {
                    required: "Project name required"
                },
                dpAIReleaseBy: {
                    required: "Release by required"
                }
            },
            success: function (label, element) {

                if ($(element).attr("name") == "chkAIWork") {
                    $("#lblChkAIWork").text('');
                }
                else if ($(element).attr("name") == "rdoMatchType") {
                    $("#lblRdoMatchType").text('');
                }
                else if ($(element).attr("name") == "ddlAIProjectType") {
                    $("#lblddlAIProjectType").text('');
                }
                else if ($(element).attr("name") == "dpAIReleaseBy") {
                    $("#lbldpAIReleaseBy").text('');

                }
            }
        });

 

I'm aware there is a kendo validate but have never used it because JQuery validate was working fine before the upgrade

 

Can anyone help with this?

Thanks

[Tyler]

So i did some more digging and found that the fact the updated controls put the name attribute on the UL of the radioGroup it's messing up the validation because it's passing the UL to the validator code instead of the LI

EDIT: I "fixed" the issue by not using the core wrapper controls and just used the JS ones instead. Still not sure why the core one was changed or why that one element breaks the whole validation

<!-- Current -->
<ul data-role="group" id="rdoMatchType" style="width: 100%; font-weight: bold;" role="radiogroup" class="k-radio-list k-list-horizontal">

    <li class="k-radio-item">
        <input type="radio" class="k-radio" value="Part" name="rdoMatchType" id="cfa2753e-02aa-4fce-ae9f-5317ea0281ba">
        <label class="k-radio-label" for="cfa2753e-02aa-4fce-ae9f-5317ea0281ba">Part</label>
    </li>
    <li class="k-radio-item">
        <input type="radio" class="k-radio" value="Part &amp; Rev" name="rdoMatchType" id="bdeff2c3-1eb7-4484-aeb6-8e4e4503f653">
        <label class="k-radio-label" for="bdeff2c3-1eb7-4484-aeb6-8e4e4503f653">Part &amp; Rev</label>
    </li>
    <li class="k-radio-item">
        <input type="radio" class="k-radio" value="No Match" name="rdoMatchType" id="dbd35c07-5089-4f32-9882-420350891307">
        <label class="k-radio-label" for="dbd35c07-5089-4f32-9882-420350891307">No Match</label>
    </li>

</ul>




<!-- New -->
<ul data-role="group" id="rdoMatchType" name="rdoMatchType" style="width: 100%; font-weight: bold;" class="k-radio-list k-list-horizontal" role="radiogroup">

    <li class="k-radio-item" role="none">
        <input type="radio" class="k-radio k-radio-md" value="Part" id="ad959543-3a0a-4230-b4cd-f61ea7f06bda" data-role="radiobutton" name="rdoMatchType">
        <label for="ad959543-3a0a-4230-b4cd-f61ea7f06bda" class="k-radio-label">Part</label>
    </li>
    <li class="k-radio-item" role="none">
        <input type="radio" class="k-radio k-radio-md" value="Part &amp; Rev"id="b20e9350-8f70-444a-88cb-174d2ecc3c9b" data-role="radiobutton" name="rdoMatchType">
        <label for="b20e9350-8f70-444a-88cb-174d2ecc3c9b" class="k-radio-label">Part &amp; Rev</label>
    </li>
    <li class="k-radio-item" role="none">
        <input type="radio" class="k-radio k-radio-md" value="No Match"id="ec11455d-ff97-4ca9-add9-20ecccede232" data-role="radiobutton" name="rdoMatchType">
        <label for="ec11455d-ff97-4ca9-add9-20ecccede232" class="k-radio-label">No Match</label>
    </li>

</ul>

 

Is there a way to get that name to stop being added to the UL and only the LI's?

[Martin]

Could you please provide a runnable Dojo example with the whole implementation where I can observe the issue? I will then be happy to debug and see what is causing the problem.

[Kendo Dude]

I just wasted the last two days on this exact same issue.

I am using Telerik.UI.for.AspNet.Core version 2022.2.621.

Turns out an easy fix is to do this :

$.validator.setDefaults({
    ignore : ".ignore",
});

Then add the .ignore class to the RadioGroup or CheckBoxGroup 

@(Html.Kendo().RadioGroupFor(model => model.status)
.Layout("horizonal")
.Items(i => 
{
  i.Add().Label("Complete").Value("Complete");
  i.Add().Label("Not Started").Value("Not Started");
})
.HtmlAttributes(new { @class="ignore" })
)

Turns out the .ignore class only gets added to the UL and the inputs still validate. 

[Russell]

This just took me over a half a day before I looked for the solution here. This is a serious time waster. Does anyone know if there is a planned fix for this?

Kudos to @Kendo Dude for posting this fix. Thank you so much!

[Martin]

Hi, Russel. So far we haven't been able to reproduce the behaviour, based on the information in the thread. Could you please let me know if the issue occurs on our online demos? If not, please share a runnable Dojo example that reproduces the problem, so that we can investigate further. Thank you!

[Russell]

I just tried to do this with the Dojo, but in my case this is related to Telerik UI for ASP.Net Core. When creating this using the code:

<label for"="CriticalSafetyMajor" class="control-label">Select at least one</label>

                        @(Html.Kendo().CheckBoxGroup()
                            .Name("CriticalSafetyMajor")
                            .BindTo(enumValues)
                            .Value(new string[] { "1", "2",})
                            .HtmlAttributes(new { @class = "ignore" }))
<span asp-validation-for="CriticalSafetyMajor" class="text-danger"></span>

 <input id="btnCreate" value="Create" type="button" class="btn btn-primary" />

I had to put the "ignore" in the HtmlAttributes as illustrated in fix from Kendo Guy above. 

In my case the values of "enumValues" above come from code in the controller that outputs this data:

"items":[
            {"enabled":true,"label":"Critical","value":"0"},
            {"enabled":true,"label":"Safety","value":"1"},
            {"enabled":true,"label":"Major","value":"2"}
          ]

The validation and the cshtml snippets are included in the attached files.

Please note I'm also using Bootstrap v5.3.2 and the jQuery Validation Plugin - v1.20.0 along with the latest 2023.3.1010 Kendo library and the 7.0.1 Bootstrap Theme.

[Alexander]

Hi Russel,

I will be currently taking over this thread.

A similar issue was reported by a client of ours in a personal thread that linked to the same problem. Thus, I am familiar with the scenario at hand. I would like to help you and the community down the line when it comes resolution of the reported issue with the Telerik UI for ASP.NET Core CheckBoxGroup and RadioGroup component incarnations.

In the context of your scenario, it appears that the issue stems indeed from the jQuery validate plugin's internal logic, as with a similar rule, the behavior is not apparent when using the Kendo UI for jQuery client-side Validation framework. Thus, this may also be one of the reasons that our developer's team has no official statement regarding the matter at hand and was unable to replicate the issue.

Here is a Telerik REPL where the behavior can be exhibited:

Telerik REPL for ASP.NET Core Example

Nevertheless, both the RadioGroup and CheckBoxGroup Helpers expose a ".InputName()" API configuration you can use to your advantage which explicitly sets the name attribute to be used for the radio or checkbox inputs.

"Due to your reported scenario, I will deliberately put emphasis on the CheckBoxGroup, but the same approach can be applied to RadioGroup with minor modifications to the validation rule".

For example:

@(Html.Kendo().CheckBoxGroup()
    .Name("rdoMatchType")
    .InputName("customCheckBoxGroup")
    .Layout("horizonal")
    .BindTo((IEnumerable<IInputGroupItem>)ViewData["items"])
 )

From there, you can base your validation rules upon the specified name attributes and from there:

• Check the CheckBoxGroup's value using the .value()method within the specified:
  

$(document).ready(function(){
  $("#registration").validate({
    // Specify validation rules.
    ...
    rules: {
      firstname: "required",
      lastname: "required",
      customRadioGroup: {
          required: {
              depends: function (element) {
                   return $("#rdoMatchType").data("kendoCheckBoxGroup").value().length == 0;
 }
          }
      }
    },
  
  });
});

• Utilize the "errorPlacement" configuration and place the desired error message after the CheckBoxGroup wrapper:

errorPlacement: function (error, element) {
    if (element.is("input:radio")) {
        $("#rdoMatchType").after(error);
    } else {
        element.after(error);
    }
}

The aforementioned approach would produce the following result:

I am also attaching a runnable sample that tackles the abovementioned approach in order to spare you some extra time and effort with the "2023.3.1010" version of the suite and "7.0.1" version of the Bootstrap theme.

[Kendo Dude]

Hello :)

[Alexander]

Hi Karl,

Hope all is well !

Were you able to review the provided suggestion as well? Let me know if it helps within your scenario as well - I am eager to hear back from you.

[Russell]

I have reviewed this code and understand the scenario. I have not had time to try to implement this but I appreciate your time and attention to this. The one thing I want to make sure I understand is that I would need to not have a reference to the Jquery Validate plugin to get this to work properly?

[Alexander]

Hi Russell,

The previously mentioned approach is highly reliant on the utilization of the jQuery validate plugin. Should you wish to embark on a scenario that does not involve the jQuery plugin, I would personally encourage you to embark on the approach that is demonstrated in the previously linked Telerik REPL example.

I hope this gives more clarification on the subject matter.