This is a migrated thread and some comments may be shown as answers.

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

6 Answers 252 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Peng
Top achievements
Rank 1
Peng asked on 28 Nov 2016, 10:34 PM

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.

6 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 30 Nov 2016, 01:05 PM

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
Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
0
Brian
Top achievements
Rank 1
answered on 22 Jun 2018, 02:36 PM

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

0
Brian
Top achievements
Rank 1
answered on 22 Jun 2018, 03:01 PM

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

0
Ianko
Telerik team
answered on 25 Jun 2018, 07:21 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Cole
Top achievements
Rank 1
answered on 01 Aug 2018, 03:10 PM
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? 
0
Ianko
Telerik team
answered on 02 Aug 2018, 07:20 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
General Discussions
Asked by
Peng
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Brian
Top achievements
Rank 1
Cole
Top achievements
Rank 1
Share this question
or