Trouble with checkbox validation in Razor form

Question

I am currently at an internship and am completely new to Razor and C# MVC. I am currently building a simple Razor form, but my validation is giving me grief for a check box.

Here is my model code:

[DisplayName("Sign me up for spam* ")]
[Range(typeof(bool), "true", "true", ErrorMessage = "You must sign up for spam.")]
public bool Check { get; set; }

Here is my Razor markup:

@Html.LabelFor(model => model.Check, new { @class = "" })
@Html.CheckBoxFor(model => model.Check, new { @class = "example1"})

Here is the generated HTML:

<input class="example1" data-val="true" data-val-range="You must sign up for spam." data-val-range-max="True" data-val-range-min="True" data-val-required="The Sign me up for spam*  field is required." id="Check" name="Check" type="checkbox" value="true">
<input name="Check" type="hidden" value="false">

I know that Razor will generate both inputs automatically. My problem is that the validation is simply not working on the check box. The model state is always invalid because of it, and on the client side the error message appears when the box is checked and disappears when the box is unchecked. I have been googling for answers, but have come up short and my mentor doesn't know what is going screwy either.

I can't reproduce the problem on my end. Could you add the full code? — Pankwood
– Pankwood, Commented Jun 28, 2018 at 18:00
@DaniloDebiaziVicente I got the validation working for the model by making a custom validation attribute, still broken on client side. I am going to try putting in the jQuery you posted and see what happens. Thank you! — dresscode
– dresscode, Commented Jun 28, 2018 at 18:45

Pankwood · Accepted Answer · 2018-06-28 18:17:32Z

3

It looks like a client side reversed issue. Add this jquery in your page and I think it will be fixed:

<script>
    // extend range validator method to treat checkboxes differently
    var defaultRangeValidator = $.validator.methods.range;
    $.validator.methods.range = function(value, element, param) {
        if(element.type === 'checkbox') {
            // if it's a checkbox return true if it is checked
            return element.checked;
        } else {
            // otherwise run the default validation function
            return defaultRangeValidator.call(this, value, element, param);
        }
    }
</script>

answered Jun 28, 2018 at 18:17

Pankwood

1,8765 gold badges29 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dresscode Over a year ago

Thank you! This worked! Any idea why the client side would have reversed it? I hadn't added any of my own code to the client side.I am trying to understand what is going on with my code, not just patch on a solution.

Pankwood Over a year ago

Because it is set as true by default in MVC despite it will display uncheck on the browser, so the validation might not work as you expect it to, that is why you have to add this jquery code to fix the validation.

Collectives™ on Stack Overflow

Trouble with checkbox validation in Razor form

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related