Remote validation with radio button in asp.net mvc

Question

I need to use remote validation on my boolean field. I have view model which look like this:

public class ViewModel
{   
    [Remote("ValidMePlease", "Home", AdditionalFields = "SomeKindOfDate", ErrorMessage = "use date with true")]
    public bool IsSomething {get;set;}
    public DateTime? SomeKindOfDate {get;set;}
}

My Controller:

[OutputCache(Location = System.Web.UI.OutputCacheLocation.None, NoStore = true)]
public class HomeController : Controller 
{
    public JsonResult ValidMePlease(bool IsSomething , DateTime? SomeKindOfDate )
    {
        if (IsSomething && !SomeKindOfDate .HasValue)
            return Json(false, JsonRequestBehavior.AllowGet);
        return Json(true, JsonRequestBehavior.AllowGet);
    }
}

My view:

<div class="control">
    @Html.LabelFor(m => m.IsSomething , new { @class = "control-label" })
    <div class="controls">
        <label class="radio inline">
            @Html.RadioButtonFor(m => m.IsSomething , false) No
        </label>
        <label class="radio inline">
            @Html.RadioButtonFor(m => m.IsSomething, true) Yes
        </label>
    </div>
</div>

My rendered view:

   <div class="control">
        <label class="control-label" for="IsSomething ">Is something</label>
        <div class="controls">
            <label class="radio inline">
                <input checked="checked" data-val="true" data-val-remote="use date with true" data-val-remote-additionalfields="*.IsSomething ,*.SomeKindOfDate" data-val-remote-url="/admin/User/ValidMePlease" data-val-required="Is something is required." id="IsSomething " name="IsSomething " type="radio" value="False" /> No
            </label>
            <label class="radio inline">
                <input id="IsSomething " name="IsSomething " type="radio" value="True" /> Yes
            </label>
        </div>
</div>

Idea is that when boolean field has true I need to require a date. And what's the problem. When I submit form it always pass false for IsSomething in my ValidMePlease remote method. I think it happens because only first input has data-val- attributes. Any suggestion will be appreciated.

Stan Lukas · Accepted Answer · 2014-07-25 17:18:31Z

5

Looks like there is a bug in the jquery.validate.unobtrusive.js in the "remote" validator. Try maybe replacing this line:

return $(options.form).find(":input[name='" + escapeAttributeValue(paramName) + "']").val();

with:

var $input = $(options.form).find(":input[name='" + escapeAttributeValue(paramName) + "']");
if ($input.is(":radio")) {
    return $input.filter(":checked").val();
} else {
    return $input.val();
}

You will need same validator on both radio buttons, to make sure field is valid when selected Yes option.

Another small thing is making sure id is unique in your html. From your example you have both radio buttons with the same id attribute. I would use something like this:

@Html.RadioButtonFor(m => m.IsSomething, false, new { id = "IsSomething_False" })
@Html.RadioButtonFor(m => m.IsSomething, true, new { id = "IsSomething_True" })

Added: Validation should work without changing id attribute.

ID by its definition has to be unique in any system, and so by making sure it is unique, will help you not only when validating against w3c.org, but also when adding labels to each radio button.

edited Jul 25, 2014 at 17:18

answered Nov 8, 2013 at 2:08

Stan Lukas

663 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Julian Over a year ago

Thanks helped me alot. I do use the same Id for multiple radio buttons but still works great.

Stan Lukas Over a year ago

I'm glad it helped @Julian. You are right, unique Id is an optional step for this question, and client-side validation will work as expected regardless. I have updated my answer to explain why id should be modified too.

Collectives™ on Stack Overflow

Remote validation with radio button in asp.net mvc

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related