CODEWITHSUNDEEP
asp.net-coreasp.net-core-mvccoreclrtag-helperskendo-validator
LP13
LP13

Reputation: 34119

asp-for tag adds required field validation on checkbox in asp.net core

I have asp.net core application and im trying to add simple checkbox without any validation. Checkbox is bound to boolean property on model. Below is the code

Model 

public class MyModel
{  
    public bool IsEmployee { get; set; }
}

cshtml 

 <form>
   <div>
       <label asp-for="IsEmployee">Is Employee</label>
       <input type="checkbox" asp-for="IsEmployee"/>             
   </div>
   <button id="btnSave" class="btn btn-primary" type="button">Save</button>
 </form>
 <script src="~/js/test.js"></script>

javascript

$(function () {
   var kendoValidator = $('form').kendoValidator().data("kendoValidator");
   $('#btnSave').click(function () {
    if (kendoValidator.validate()) {
        alert('true');
    }
    else {
        alert('false');
    }
   })
})

I am using asp-for tag helper on input element. Note that IsEmployee property DOES NOT have [Required] attribute. But because of asp-for tag helper the rendered html has data-val-required and data-val attributes on input element. It also adds one more hiddden input element with same name. Below is rendered html. (also note that i think it only happens when input type is checkbox. for textboxes its working fine)

 <form novalidate="novalidate" data-role="validator">
    <div>
        <label for="IsEmployee">Is Employee</label>
        <input name="IsEmployee" id="IsEmployee" type="checkbox" value="true" data-val-required="The IsEmployee field is required." data-val="true">             
    </div>
    <button class="btn btn-primary" id="btnSave" type="button">Save</button>
    <input name="IsEmployee" type="hidden" value="false">
</form>

I am using kendovalidator as well which adds data-role="validator" on form element.

Issues
There are 2 issues here
1> As soon as i click on check the box error message appears as The IsEmployee field is required.
2>kendoValidator.validate() method always returns false regardless of checkbox is selected or not.

Demo here JSFiddle

Update 2
We cannot bind nullable bool to checkbox. I am using asp.net core. I am not sure what the equivalent syntax in asp.net core for the suggestion here which is valid for classic asp.net

Upvotes: 4

Views: 4905

Answers (2)

John81
John81

Reputation: 4074

Add data-validate="false" to the checkbox input. The kendoValidator will ignore all inputs with that attribute set to false.

<input type="checkbox" asp-for="IsEmployee" data-validate="false" />

Upvotes: 1

korn3l
korn3l

Reputation: 143

If you don't wan't the default generated html you have 2 choices.

  1. Don't use it ! You are not forced to use the tag helpers, they are there for when you do need other html attributes generated. In this case just use < input name="IsEmployee" ...>
  2. Change the way asp-for behaves for your checkbox. You can do this be either creating your own IHtmlGenerater or by extending the DefaultHtmlGenerator and overriding GenerateCheckBox and possibly GenerateInput and then registering it with something like services.TryAddSingleton();

Hope this helpes you.

Upvotes: 0

Related Questions