提交前单选按钮验证实现：需强制用户选择选项后才可提交

Hey there! Let's tackle this radio button validation issue you're having—sounds like you've tried a few approaches already but nothing's sticking. Let's break down some reliable fixes that should get this working for you.

First, let's double-check your model setup. If you marked the property as required but it's a nullable type (like int?), you need to explicitly add the [Required] attribute for validation to trigger. Here's a corrected model example:

public class PreRegistrationQuestionModel
{
    [Required(ErrorMessage = "Please select an answer to proceed to the next question.")]
    public int SelectedAnswerId { get; set; } // Non-nullable ensures validation kicks in if unselected
    // Or if you need nullable, keep the [Required] attribute:
    // [Required(ErrorMessage = "Please select an answer to proceed to the next question.")]
    // public int? SelectedAnswerId { get; set; }

    // Your other properties (like possible answers) go here
    public List<AnswerOption> PossibleAnswers { get; set; }
}

Next, you mentioned ValidationMessageFor didn't work before—chances are you missed enabling client-side validation in your project. Make sure these scripts are included in your layout (usually _Layout.cshtml):

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

And confirm these settings are in your web.config:

<appSettings>
  <add key="ClientValidationEnabled" value="true" />
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

Then update your Razor view to include the validation message properly, along with correctly grouped radio buttons:

@model PreRegistrationQuestionModel

@using (Html.BeginForm("Question", "PreRegistration", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post))
{
    <div class="question-container">
        <h3>@Model.QuestionText</h3>
        <div class="radio-group">
            @foreach (var answer in Model.PossibleAnswers)
            {
                <div class="radio-item">
                    @Html.RadioButtonFor(m => m.SelectedAnswerId, answer.Id)
                    @Html.LabelFor(m => m.SelectedAnswerId, answer.Text)
                </div>
            }
            <!-- This will show the error if validation fails -->
            @Html.ValidationMessageFor(m => m.SelectedAnswerId, "", new { @class = "text-danger mt-2" })
        </div>

        <button type="submit" class="btn btn-primary mt-4">Next Question</button>
    </div>
}

The critical part here is that RadioButtonFor uses the same model property for all options—this ensures they share the same name attribute, making them a proper radio group (so only one can be selected, and the model binds correctly).

If the above doesn't work for some reason, let's implement a custom frontend check. First, add an error element in your view where you want the message to appear:

<div id="answer-error" class="text-danger mt-2" style="display: none;">Please select an answer to continue.</div>

Then add this script at the bottom of your view (or a dedicated JS file):

$(document).ready(function() {
    // Handle form submission
    $('form').submit(function(e) {
        // Check if any radio button in the group is checked
        const isAnswerSelected = $('input[name="SelectedAnswerId"]').is(':checked');
        
        if (!isAnswerSelected) {
            e.preventDefault(); // Stop the form from submitting
            $('#answer-error').show(); // Display the error
            // Optional: Scroll to the radio group and focus the first option
            $('input[name="SelectedAnswerId"]').first().focus();
        } else {
            $('#answer-error').hide(); // Hide error if selection is made
        }
    });

    // Hide error when user selects an option
    $('input[name="SelectedAnswerId"]').change(function() {
        $('#answer-error').hide();
    });
});

Just make sure the name attribute in the selector matches exactly what Razor generates for your radio buttons (check via browser dev tools if you're unsure).

• If your radio buttons don't have the same name attribute, they won't act as a group—fix this by using RadioButtonFor consistently.
• If you're using a nullable property without [Required], the model won't flag it as missing.
• Ensure you're not overriding form submission elsewhere in your JS that might bypass this validation.

内容的提问来源于stack exchange，提问作者The OrangeGoblin