CODEWITHSUNDEEP
c#jqueryjquery-validateasp.net-mvc-5
Pandagrrl
Pandagrrl

Reputation: 106

RemoteAttribute Validation passes the wrong value of AdditionalFields

I am using a RemoteAttribute for some custom validation in my form. For simplicity, I have a radio group, PrimarySupportingDocument, with 3 options. If it is a certain selection the remote validation should validate that two textbox values, VIN and TitleNumber, match based on some (irrelevant) criteria.

In my ViewModel:

    [Required]
    [DisplayName("VIN")]
    public string VIN { get; set; }

    [Required]
    [DisplayName("Primary Supporting Document")]
    public string PrimarySupportingDocument { get; set; }

    [DisplayName("Title Number")]
    [Remote("VinAndTitleMatch", "Validation", ErrorMessage = "VIN and Title Number do not match", AdditionalFields = "VIN, PrimarySupportingDocument")]
    public string TitleNumber { get; set; }

In my ValidationController:

    public JsonResult VinAndTitleMatch(string titleNumber, string VIN, string primarySupportingDocument)
    {
        if (primarySupportingDocument == "In-State Title" && VIN != null && titleNumber != null)
        {


            if (/* test if vin and title number match */)
            {
                return Json(true, JsonRequestBehavior.AllowGet);
            }

            return Json("VIN and Title Number do not match", JsonRequestBehavior.AllowGet);
        }

        return Json(true, JsonRequestBehavior.AllowGet);
    }

Form Example: example of problem

So, if you look at the request URL, you can see it is passing In-State+Title as the PrimarySupportingDocument value rather than the actual :checked value Out of State Title.

I did some research to see if the actual value being passed from jquery.validate was correct and found this issue. This is not the problem, since its been fixed in 1.11.1 and I logged the output of the return value of the line : $("input[name='" + $(element).attr("name") + "']:checked").val() which is returning the correct value but, I can't seem to figure out why it is not passing the checked value of the radio group.

Here is the rendered output of the radio group:

<div class="form-group">
    <label class="control-label" for="PrimarySupportingDocument">Primary Supporting Document</label>
    <div class="radio">
        <label>
            <input data-val="true" data-val-required="The Primary Supporting Document field is required." id="PrimarySupportingDocument0" name="PrimarySupportingDocument" type="radio" value="In-State Title">In-State Title</label>
    </div>
    <div class="radio">
        <label>
            <input id="PrimarySupportingDocument1" name="PrimarySupportingDocument" type="radio" value="Out of State Title">Out of State Title</label>
    </div>
    <div class="radio">
        <label>
            <input id="PrimarySupportingDocument2" name="PrimarySupportingDocument" type="radio" value="None">None</label>
    </div> 
    <span class="field-validation-valid" data-valmsg-for="PrimarySupportingDocument" data-valmsg-replace="true"></span>
</div>

Upvotes: 2

Views: 523

Answers (1)

LostInComputer
LostInComputer

Reputation: 15420

Unfortunately, jquery.validate.unobtrusive.js doesn't support radio buttons! It doesn't filter by the checked attribute

adapters.add("remote", ["url", "type", "additionalfields"], function (options) {
    ...
    $.each(splitAndTrim(options.params.additionalfields || options.element.name), function (i, fieldName) {
        var paramName = appendModelPrefix(fieldName, prefix);
        value.data[paramName] = function () {
            return $(options.form).find(":input").filter("[name='" + escapeAttributeValue(paramName) + "']").val(); //problem here
        };
    });
    ...
});

Easiest way around this is to use select element instead of radio buttons

Upvotes: 2

Related Questions