MVC Form Validation failed due to two required fields with unused one

Question

I am using MVC ViewModel. There are two radio buttons with yes or no in a form. If the user selects 'Yes' TextField1 will be displayed and if select 'No' TextField2 will be displayed. Both are required fields with an * ( asterick ) symbol. Even both are required fields user is allowed to fill only one TextField at a time based on radiobutton selection. The issue is when user submits one of the textfield required validation error message is displaying. Is there any workaround to fix this issue.

Answer 1

You can't have both be required if you only display one.

One of the easiest ways to get around this is one of the advantages of using View Models over passing the DTO object to the page.

I will need to make a lot of assumptions here because you haven't provided any code, but your question is straight forward enough. Even if my assumptions are incorrect, the principles can be extrapolated easily to your specific use case.

I'm going to assume that your object looks something like this:

public class DtoObject
{
    public bool IsPositiveSelection { get; set; }
    public string YesReason { get; set; }
    public string NoReason { get; set; }
}

With no knowledge of what is going on, I'll assume you have a good reason for that. Perhaps asking for an email address in one, and phone number the other.

If you haven't already, you will want to create a view model like this:

public class DtoObjectViewModel
{
    public bool YesNoRadio { get; set; }
    [Required]
    public string Reason { get; set; }
}

What I did here is instead of making two separate boxes, have a single one that will always be displayed. If you do need something like email validation on one, and phone number on the other, you can apply that with JavaScript instead of just relying on Attributes.

This will then allow you to ensure that the value is always there, regardless of which state the radio button is in.

At some point, you'll need to map your View Model back to your DTO Object:

private DtoObject MapToDto(DoObjectViewModel model)
{
    return new DtoObject
    {
        IsPositiveSelection = model.YesNoRadio,
        YesReason = model.YesNoRadio ? model.Reason : "",
        NoReason = model.YesNoRadio ? "" : model.Reason
    };
}

There are plenty of other options as well, but those would require more JavaScript, and make any answer even broader than this one already is.