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

7 posts, 0 answers
  1. Peng
    Peng avatar
    13 posts
    Member since:
    Aug 2010

    Posted 28 Nov 2016 Link to this post

    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.

  2. Ianko
    Admin
    Ianko avatar
    1936 posts

    Posted 30 Nov 2016 Link to this post

    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.
  3. Brian
    Brian avatar
    5 posts
    Member since:
    Sep 2015

    Posted 22 Jun 2018 in reply to Ianko Link to this post

    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

  4. Brian
    Brian avatar
    5 posts
    Member since:
    Sep 2015

    Posted 22 Jun 2018 in reply to Brian Link to this post

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

  5. Ianko
    Admin
    Ianko avatar
    1936 posts

    Posted 25 Jun 2018 Link to this post

    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.
  6. Cole
    Cole avatar
    1 posts
    Member since:
    Jun 2015

    Posted 01 Aug 2018 Link to this post

    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? 
  7. Ianko
    Admin
    Ianko avatar
    1936 posts

    Posted 02 Aug 2018 Link to this post

    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.
Back to Top