Client side validation does not work for enum radio button in mvc

Question

I have an enum:

public enum KindOfDeal
{
    NotSelected,
    BuyIt,
    SaleIt,
    RentIt,
    WantRent,
    ExchangeIt}

I use this enum in my model as follow:

public class Property : IProperty
{
    [Key]
    public virtual int PropertyId { set; get; }

    [Range(minimum: 0, maximum: double.MaxValue, ErrorMessage = "Essential")]
    public virtual double? LandArea { set; get; }

    [Range(minimum: 0, maximum: double.MaxValue, ErrorMessage = "Essential")]
    public virtual double? FoundationArea { set; get; }

    [Required(ErrorMessage = "Essential")]
    public virtual KindOfDeal? KindOfDeal { set; get; }
}

and then i use this enum to create radio button in cshtml file as follow:

 <div id="kind-of-deal">
                                    @Html.ValidationMessageFor(model => model.KindOfDeal, null, htmlAttributes: new { @class = "ErrorMessageForInputs" })
                                    <div class="A7O-wrapr-radio">

                                        @Html.RadioButtonFor(model => model.KindOfDeal, (int)KindOfDeal.BuyIt, htmlAttributes: new { @class = "A7O-radio", id = "p-purchase" })
                                        @Html.Label("p-purchase", "", new { @class = "A7O-label-radio", data_icon = " " })

                                    </div>
                                    <div class="A7O-wrapr-radio">
                                        @Html.RadioButtonFor(model => model.KindOfDeal, (int)KindOfDeal.SaleIt, htmlAttributes: new { @class = "A7O-radio", id = "p-sale" })
                                        @Html.Label("p-sale", "", new { @class = "A7O-label-radio", data_icon = " " })

                                    </div>
                                    <div class="A7O-wrapr-radio rel" id="parent-rentPresenter">
                                        @Html.RadioButtonFor(model => model.KindOfDeal, (int)KindOfDeal.RentIt, htmlAttributes: new { @class = "A7O-radio", id = "p-rent-presenter" })
                                        @Html.Label("p-rent-presenter", "", new { @class = "A7O-label-radio", data_icon = " " })
                                    </div>
                                    <div class="A7O-wrapr-radio rel">
                                        @Html.RadioButtonFor(model => model.KindOfDeal, (int)KindOfDeal.WantRent, htmlAttributes: new { @class = "A7O-radio", id = "p-rent-wanted" })
                                        @Html.Label("p-rent-wanted", "", new { @class = "A7O-label-radio", data_icon = " " })
                                    </div>
                                    <div class="A7O-wrapr-radio">
                                        @Html.RadioButtonFor(model => model.KindOfDeal, (int)KindOfDeal.ExchangeIt, htmlAttributes: new { @class = "A7O-radio", id = "p-exchange-presenter" })
                                        @Html.Label("p-exchange-presenter", "", new { @class = "A7O-label-radio", data_icon = " " })
                                    </div>
                                    <div class="A7O-wrapr-radio">

validate.js and validate.unobtrusive.js was referenced in my cshtml file. In addition, I make this enum as nullable Required property. Server-side validation works fine for these enum radio buttons. Also, the client-side validation works fine for other html input elements EXCEPT for these enum radio buttons.

Answer 1

I found the result that could helpful for others:

as you see I associated a class called "A7O-radio" to radio button and in this class I make radiobutton display:none; easy? I put alot of time to know this. because the display is none so it doesnot show the client-side validation message for it. to cope with it, I insert another radiobutton for NotSelected enum value and make its opacity to zero; and the magic was happened. I also set the width and height of this radiobutton to zero so the same problem was arisen again.

 @Html.RadioButtonFor(model => model.KindOfDeal, (int)KindOfDeal.NotSelected,new { @class= "opacity0" })