CODEWITHSUNDEEP
jqueryasp.net-mvcjquery-validate
mardok
mardok

Reputation: 2415

Remote validation with radio button in asp.net mvc

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.

Upvotes: 3

Views: 1754

Answers (1)

Stan Lukas
Stan Lukas

Reputation: 66

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.

Upvotes: 5

Related Questions