Form validation always treats checkbox as required field

3 Answers 598 Views
Checkbox
Legion
Top achievements
Rank 1
Iron
Legion asked on 05 May 2024, 04:28 PM

I have a form on which there is checkbox control. For some reason the kendo validator always considers the checkbox a required field and considers a non-checked state as invalid. How can I get the validator to ignore the checkbox? As you can see, the field, IsTerminated is not marked required.



<form id="frmEmployee" method="post">
    <div class="control-grid">
        <div class="col-1-label">
            @Html.LabelFor(m => m.Id, "Employee Id: ")
        </div>
        <div class="col-1-control">
            @Html.Kendo().TextBoxFor(m => m.Id).HtmlAttributes(new { @readonly = "", @required = "", @validationMessage = "Id is required" })
        </div>

        <div class="col-2-label">
            @Html.LabelFor(m => m.FirstName, "First Name: ")
        </div>
        <div class="col-2-control">
            @Html.Kendo().TextBoxFor(m => m.FirstName).HtmlAttributes(new { @required = "", @validationMessage = "First Name is required" })
        </div>

        <div class="col-3-label">
            @Html.LabelFor(m => m.LastName, "Last Name: ")
        </div>
        <div class="col-3-control">
            @Html.Kendo().TextBoxFor(m => m.LastName).HtmlAttributes(new { @required = "", @validationMessage = "Last Name is required" })
        </div>

        <div class="col-1-label">
            @Html.LabelFor(m => m.MiddleName, "Middle Name: ")
        </div>
        <div class="col-1-control">
            @Html.Kendo().TextBoxFor(m => m.MiddleName)
        </div>

        <div class="col-2-label">
            @Html.LabelFor(m => m.PreferredName, "Preferred Name: ")
        </div>
        <div class="col-2-control">
            @Html.Kendo().TextBoxFor(m => m.PreferredName)
        </div>

        <div class="col-3-label">
            @Html.LabelFor(m => m.Email, "Email: ")
        </div>
        <div class="col-3-control">
            @Html.Kendo().TextBoxFor(m => m.Email).HtmlAttributes(new { @required = "", @validationMessage = "Email is required" })
        </div>

        <div class="col-1-label">
            @Html.LabelFor(m => m.HireDate, "Hire Date: ")
        </div>
        <div class="col-1-control">
            @Html.Kendo().DatePickerFor(m => m.HireDate).HtmlAttributes(new { @required = "", @validationMessage = "Hire Date is required" })
        </div>

        <div class="col-2-label">
            @Html.LabelFor(m => m.IsTerminated, "Terminated: ")
        </div>
        <div class="col-2-control">
            @Html.Kendo().CheckBoxFor(m => m.IsTerminated)
        </div>

        <div class="col-3-label">
            @Html.LabelFor(m => m.TerminationDate, "Termination Date: ")
        </div>
        <div class="col-3-control">
            @Html.Kendo().DatePickerFor(m => m.TerminationDate)
        </div>

        <div style="display: none;">
            @Html.Kendo().DatePickerFor(m => m.CreatedDate)
        </div>
    </div>
</form>

 

On page load I have:


    $(document).ready(function ()
    {
        $("#frmEmployee").kendoValidator();
    });

 

And before I submit my data to the server I have a check:


let validator = $('#frmEmployee').kendoValidator().data('kendoValidator');

if (validator.validate())
{
   // ...
}

validator.validate() always returns false if IsTerminated is not checked. IsTerminated is a non-nullable bool.

3 Answers, 1 is accepted

Sort by
1
Timo
Top achievements
Rank 1
Iron
answered on 01 Jul 2024, 12:31 PM | edited on 04 Jul 2024, 08:03 AM

I'm having the same issue, but in a Kendo Grid with Inline editing enabled. I have no custom templates on the checkbox column.

Update: I managed to solve this error by copying the Boolean.cshtml from the EditorTemplates from the starter template into my project. 

The project will then automatically use a 'dumbed down' checkbox that does not contain the data-val-required attrbute. 

To me it sounds like a band aid to a bug, but at least I solved it the way the starter template would fix it.

Ashot
Top achievements
Rank 1
commented on 03 Jul 2024, 06:23 PM | edited

The same problem.
The reason is, I don't know why, but the same code, Kendo for Asp net core created custom editor locally like this
editor:
'\u003cinput class="check-box" data-val="true" data-val-required="The Discontinued field is required." id="Discontinued" name="Discontinued" type="checkbox" value="true" /\u003e\u003cinput name="Discontinued" type="hidden" value="false" /\u003e\u003cspan class="field-validation-valid" data-valmsg-for="Discontinued" data-valmsg-replace="true"\u003e\u003c/span\u003e',

     
when in the REPL, it's rendering this editor, where is the code for creating kendo checkbox 
editor:
'\n\n\u003cinput data-val="true" data-val-required="The Discontinued field is required." id="Discontinued" name="Discontinued" type="checkbox" value="true" /\u003e\u003cinput name="Discontinued" type="hidden" value="false" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery("#Discontinued").kendoCheckBox({"checked":false});});\u003c/script\u003e\u003cspan class="field-validation-valid" data-valmsg-for="Discontinued" data-valmsg-replace="true"\u003e\u003c/span\u003e',
Ashot
Top achievements
Rank 1
commented on 04 Jul 2024, 08:09 AM

Update: I managed to solve this error by copying the Boolean.cshtml from the EditorTemplates from the starter template into my project. 

Wow, that is weird. But it's working, thank you!!
0
Martin
Telerik team
answered on 08 May 2024, 12:56 PM

Hello, Legion,

I tried to reproduce the behaviour in this Dojo example, but the validation passes if the Checkbox is not checked. Could you please try to modify the example to reproduce the issue?

Regards,
Martin
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Legion
Top achievements
Rank 1
Iron
commented on 08 May 2024, 05:49 PM

Does it matter that the model is an entity framework entity? ie. Would entity framework add some kind of Required annotation to an entity that could mess with the validation?
Martin
Telerik team
commented on 13 May 2024, 11:09 AM

Hello, Legion,

I cannot say if the framework would have something to do with it. You can inspect the Checkbox to see if a required attribute is assigned to the input element. 

0
Aaron
Top achievements
Rank 1
Iron
Iron
answered on 27 Aug 2024, 02:44 AM

I experience the same. I found out that it only affect checkbox rendered from the following syntax:

@Html.CheckBoxFor(m => m.IsTerminated)

It's not happening if I just use @Html.CheckBox() or <input type="checkbox" />

Hope this can be fixed.

Anton Mironov
Telerik team
commented on 29 Aug 2024, 11:52 AM

Hi Aaron,

This is a known issue and here is the GitHub item for it:

In order to achieve the desired behavior before the final fix of the issue above, I would recommend using one of the following approaches:

  • Use a nullable boolean property:
    public bool? IsTerminated
  • Programmatically remove the "data-val-required" attribute:
    <script>
        $(document).ready(function () {
            $('input[type="checkbox"]').removeAttr('data-val-required');
        })
    </script>


Kind Regards,
Anton Mironov

 

 

Kendo Dude
Top achievements
Rank 2
Iron
Iron
commented on 25 Oct 2024, 09:47 PM | edited

I have the same issue in my editable grid.

For some reason the true/false checkbox is now becoming required if unchecked (false).

This was working fine before with the old Telerik version. 

I tried Antons suggested code, but that did not work in my case.

I needed to execute the $('input[type="checkbox"]').removeAttr('data-val-required') on the grid .Edit() event.

//add this to the grid.

.Editable(editable => editable.Events(e => e.Edit("onEdit")))

//the onEdit() function
 
<script>
function onEdit(e){
if (e.model != null){
  var chkbox = e.container.find("input[type=checkbox]");
  chkbox.removeAttr('data-val-required');
 }
}
</script>

 

Eyup
Telerik team
commented on 29 Oct 2024, 07:36 PM

Hi Kendo Dude,

Thanks a lot for sharing your approach with the community.

I hope it will be helpful to other developers as well.

Tags
Checkbox
Asked by
Legion
Top achievements
Rank 1
Iron
Answers by
Timo
Top achievements
Rank 1
Iron
Martin
Telerik team
Aaron
Top achievements
Rank 1
Iron
Iron
Share this question
or