Radio button validation before post

Question

I want to ensure that a user picks an answer to the question being asked. I have tried JQuery, Custom Validation class, setting model attributes to required. To summarise, if no radio button is selected, then the error message is shown and the user has to select an answer before progressing to the next question.

This is the HTML/Razor without the ValidationMessageFor, as it hasn't worked.

@using (Html.BeginForm("Question", "PreRegistration", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
 @if (Model.Questions.fldAnswerType == "Radio")
  {
    <form id="myForm" name="myForm">
        <div class="form-group">
            <div style="margin-left: 20px;">
                @{
                    if (Model.Questions.fldOption1 != null)
                    {
                        <div class="radio">
                            @Html.RadioButton("Radio", @Model.Questions.fldOption1, new { @class = "myGroup" }) @Model.Questions.fldOption1                             
                        </div>
                    }

                    if (Model.Questions.fldOption2 != null)
                    {
                        <div class="radio">
                            @Html.RadioButton("Radio", @Model.Questions.fldOption2, new { @class = "myGroup" }) @Model.Questions.fldOption2                             
                        </div>
                    }

                    if (Model.Questions.fldOption3 != null)
                    {
                        <div class="radio">
                            @Html.RadioButton("Radio", @Model.Questions.fldOption3, new { @class = "myGroup" }) @Model.Questions.fldOption3
                        </div>
                    }

                    if (Model.Questions.fldOption4 != null)
                    {
                        <div class="radio">
                            @Html.RadioButton("Radio", @Model.Questions.fldOption4) @Model.Questions.fldOption4
                        </div>
                    }

                    if (Model.Questions.fldOption5 != null)
                    {
                        <div class="radio">
                            @Html.RadioButton("Radio", @Model.Questions.fldOption5) @Model.Questions.fldOption5
                        </div>
                    }

                    if (Model.Questions.fldOption6 != null)
                    {
                        <div class="radio">
                            @Html.RadioButton("Radio", @Model.Questions.fldOption6) @Model.Questions.fldOption6
                        </div>

                    }
                }
            </div>
        </div>
    </form>
<input type="submit" value="Next" id="btn" class="btn btn-primary" />

I have spent all day trying to get it to work but I can't...

[HttpPost]
public ActionResult Question(FormCollection collection, Questions questions)
{
   if (!ModelState.IsValid)
   {
     var viewModel = new RegistrationViewModel
      {
        Questions = questions,
        Responses = response
      };

     return View("Question", viewModel);
   }
 }

The question Model I am posting back is always null, so I am assuming this is the reason why the model state is always valid?

Any pointers would be appreciated

Answer 1

Try this:

HttpPost] public ActionResult Question(FormCollection collection, Questions questions)
{
    if (ModelState.IsValid)
    {
        var viewModel = new RegistrationViewModel { Questions = questions, Responses = response };
        return View("Question", viewModel);
    }
}
Response.next page