CODEWITHSUNDEEP
asp.net-corerazorrazor-pagesunobtrusive-validationasp.net-core-tag-helpers
David C
David C

Reputation: 2796

Razor tag helper bool Radio buttons clientside 'Required' validation

I am using Razor Pages Tag helpers for a Yes/No in a form on a page. All other fields in the form have client side unobtrusive validation, but the bool? Yes/No does not. I have a few radio Yes/No's like this, how do I get the client side to work for them? 

[Required]
public bool? Have7DaysWorth { get; set; }

I tried moving away from tag helpers too, butit doesn't hook up with this: 

<label asp-for="Have7DaysWorth" class="control-label"></label>
<div>
    <input type="radio" id="daysRadio1" name="Have7DaysWorth "
            checked="@(Have7DaysWorth  == true ? "checked": null)"
            class="custom-control-input" value="true">
    <label class="custom-control-label" for="daysRadio1">Yes</label>
</div>
<div>
    <input type="radio" id="pharmacyRadio2" name="Have7DaysWorth "
            checked="@(Have7DaysWorth  == false ? "checked": null)"
            class="custom-control-input" value="false">
    <label class="custom-control-label" for="daysRadio1">No</label>
</div>
<span asp-validation-for="Have7DaysWorth " class="text-danger"></span>

I know from searching there are some suggestions about pre-selecting one, but that isn't then a conscious value that a user has entered into a form, so not an option here.

I have tried some other ways, but they seemed to lose the value when the modelstate wasn't valid and was returned.

How do I get the client side to work for bool radios in the expected way that I want?

Upvotes: 1

Views: 1059

Answers (2)

Dave
Dave

Reputation: 531

An old thread but if you're having to upgrade a razor page website to Bootstrap 5 you'll run into this issue.

This will not work as you cannot use asp-for with C# statement not inside an attribute

<input asp-for="MarketingPrefs" type="radio" class="btn-check" value="true" @(Model.MarketingPrefs.HasValue && Model.MarketingPrefs.Value ? "checked" : null)>

If you omit the asp-for like this then local validation won't work

<input id="MarketingPrefsYes" name="MarketingPrefs" type="radio" class="btn-check" value="true" @(Model.MarketingPrefs.HasValue && Model.MarketingPrefs.Value ? "checked" : null)>

This is how to do it

<div class="btn-group" role="group">

    @Html.RadioButtonFor(model => model.MarketingPrefs, "true", new { @class = "btn-check", @id="MarketingPrefsYes" })
    <label class="btn btn-outline-secondary" for="MarketingPrefsYes">Yes</label>

    @Html.RadioButtonFor(model => model.MarketingPrefs, "false", new { @class = "btn-check", @id="MarketingPrefsNo" })
    <label class="btn btn-outline-secondary" for="MarketingPrefsNo">No</label>

</div>

Upvotes: 0

Chris Pratt
Chris Pratt

Reputation: 239270

You're not using asp-for on the radios, so it has no idea it should be required, as there's no involvement with the model, and thus the Required attribute on that property.

Upvotes: 1

Related Questions