Using RadioButtonFor with enum makes model not validate

Question

I have a problem where $("#formtest").valid() is always false when using an enum together with a RadioButtonFor . If I remove the RadioButtonFor the $("#formtest").valid() is now true .

Can anybody suggest how to fix this?

My setup:

• Umbraco CMS 6.1.1
• SurfaceController ( TestSurfaceController.cs ) to handle the POST via jQuery ajax

This is my code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/scripts/jquery.validate.js"></script>
<script src="/scripts/jquery.validate.unobtrusive.js"></script>

Test.cshtml:

@using MyProject_Umbraco.Models
@inherits UmbracoViewPage<MyProject_Umbraco.Models.TestViewModel>
@{
    Layout = "Layout.cshtml";
}

@using (Html.BeginForm(null, null, FormMethod.Post, new {id = "formtest"}))
{
    @Html.TextBoxFor(m => m.Model.FullName)

    <ul>
        <li>@Html.RadioButtonFor(m => m.Model.NotificationsFrequency, NotificationsFrequency.Instantly) Instant</li>
        <li>@Html.RadioButtonFor(m => m.Model.NotificationsFrequency, NotificationsFrequency.Daily) Daily</li>
    </ul>

    <a id="btnSignup">Sign up</a>
}

@section BottomScripts
{
    <script>
        $(function() {
            $("#btnSignup").on("click", function() {
                signup();
            });
            var signup = function() {
                $("#formtest").validate();
                if ($("#formtest").valid()) { // always false
                   var obj = $("#formtest").serializeArray();
                    $.ajax({
                        url: "@Url.Action("Index", "TestSurface")",
                        type: "POST",
                        data: obj,
                        success: function(result) {
                            alert(result);
                        }
                    });
                } // end if valid()
            }; // end signup()
        });
    </script>
}

TestViewModel.cs: used by Test.cshtml

using System.Globalization;
using Umbraco.Core.Models;
using Umbraco.Web.Models;

namespace MyProject_Umbraco.Models
{
    public class TestViewModel : RenderModel
    {
        public TestViewModel(IPublishedContent content, CultureInfo culture)
            : base(content, culture)
        {
            Model = new TestDataModel();
        }

        public TestViewModel(IPublishedContent content)
            : base(content)
        {
            Model = new TestDataModel();
        }

        public TestDataModel Model { get; set; }
    }

}

TestDataModel.cs

namespace MyProject_Umbraco.Models
{
    public class TestDataModel
    {
        public string FullName { get; set; }
        public NotificationsFrequency NotificationsFrequency { get; set; }
    }
}

NotificationsFrequency.cs

public enum NotificationsFrequency
{
    Instantly = 1,
    Daily = 2
}

Rendered html:

<form action="" id="formtest" method="post">
    <input id="Model_FullName" name="Model.FullName" type="text" value="" />        <ul>
        <li><input checked="checked" data-val="true" data-val-required="The NotificationsFrequency field is required." id="Model_NotificationsFrequency" name="Model.NotificationsFrequency" type="radio" value="Instantly" /> Instant</li>
        <li><input id="Model_NotificationsFrequency" name="Model.NotificationsFrequency" type="radio" value="Daily" /> Daily</li>
    </ul>
    <a id="btnSignup">Sign up</a>
</form>

Answer 1

Managed to fix this.

It turns out there were some conflicting javascript libraries. Fixed by updating the libraries to the newest versions.