Can not get required checkbox working (Terms and Condition Checkbox)

[Peng]

Hi there,

So I was working on a solution for required checkbox, Terms and Conditions. 

You know, where you must check it so you can submit a form. 

So I was using all the Telerik components (Data Access ORM, ASP.NET MVC UI) and build the form like so. 

And I really want to get the checkbox must be checked. I tried following this tutorial below:

http://jasonwatmore.com/post/2013/10/16/aspnet-mvc-required-checkbox-with-data-annotations

And I have tried all the methods there, it does not work. The form would still be able to submit without checkbox being checked.

I am thinking if there is something special about Telerik that I can't get it working?

Help would be really appreciated! Thank you.

 

 

Kendo.MVC version is 2016.2.607.440. 

.Net 4.5

If you need more information please let me know.

[Ianko]

Hello Peng,

Based on the example from the .NET Fiddle I am unable to define what the difficulty might be. The Kendo().CheckBoxFor() helper works as expected and validation errors are shown when the checkbox is not checked. 

On a side note you can also consider using client-side validation as addition to the server-side one: http://demos.telerik.com/aspnet-mvc/validator/index. 

You can find attached a small project that shows the checkbox validation with both suggestions implemented.

Regards,
Ianko
Telerik by Progress

[Brian]

I have the same problem with the CheckBoxFor not working for client side validation.  The demo you pointed to builds the checkbox control with a hard-coded input control, so that works fine.  However, I am using the CheckBoxFor to render the control.  The CheckBoxFor creates two input controls, the first input is the check box and a second control has no type and the same Name attribute as the checkbox (no ID) and is hidden.  What happens is the first input fails the checkbox required field validation rule (as it should), but the second input control passes my textbox required field validation.  My assumption is that because the two controls have the same name, the fact that the second input passes removes the error message generated by the first input.  Somehow Kendo knows that there was still an error, so the page is not processed, but no error message is displayed.

I don't know what is happening under the covers, but if I inspect the html in the browser and switch the order of the two input controls, it seems to work since the actual checkbox control is processed second.  Is there any other solution for getting client side validation to work as I would rather not have to write code to manipulate the html the Kendo generates.

I am using Kendo MVC 2017.3.913.545

[Brian]

Here is a sample of the two input controls generated by the CheckBoxFor (note that we manipulated a few of the classes and attributes on the first input after the controls are generated):

<input class="k-checkbox fully-transparent editor-control" data-val="true" id="UserAgreementAcknowledgement" ignoredirtydata="False" name="UserAgreementAcknowledgement" value="true" aria-hidden="true" aria-label="label" data-val-required="By checking this box you acknowledge that you have read and understood the User Agreement and agree to the terms and conditions as described. is a required field." type="checkbox">

<input name="UserAgreementAcknowledgement" value="false" aria-hidden="true" aria-label="label" type="hidden">

[Ianko]

Hi Brian,

Try upgrading to the latest version. There are updates on the generated HTML with CheckBoxFor. If the case is not solved, open a support ticket with a sample project so that we can look at this further.

Regards,
Ianko
Progress Telerik

[Cole]

I'm having the exact same issue as Brian. I have a form (Kendo UI MVC, with client-side validation), all Kendo controls (Editor, Textbox, Dropdown, Checkbox). All other controls perform as expected when KendoValidator does its work. An error alert will appear below the control (I'm using the span with data-for implementation of the alerts). But, when validating for the checkbox, no alert appears with the Rendered order. The page renders two "inputs" for the Checkbox with the same name. When validation occurs, no error message is shown. But, if I inspect the control and rearrange the order, validation will then work fine. I have attached two images for your review. Has this issue been corrected yet? 

[Ianko]

Hello Cole,

With the latest version of the Kendo UI for MVC there are updates in how CheckBox helper is rendered. You can try it out. If it happens that you have difficulties or troubles with it, you can open a support ticket and attach a sample project so that we can take a look. 

Regards,
Ianko
Progress Telerik