Problem with jQuery validate plugin (remote validation)

Question

I have a problem trying to validate a user value using the jQuery Validation plugin.

The validation seems to fire correctly and call the web service function exactly as I want but, even if the server function does work correctly and returns a true/false result the field is always invalid.

This is the validation code on the client side

$('#myForm').validate({
    errorContainer: container,
    errorLabelContainer: $("ol", container),
    wrapper: 'li',
    meta: "validate",
    rules: {
        Code: { required: true, maxlength: 15, remote: function () {
            return {
                type: "POST",
                url: GetBaseWSUrl() + 'MyService.asmx/IsValidCode',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: JSON.stringify({ umltCode: $('#Code').val() })
            }
        }
        },
        Description: { required: true, maxlength: 255 },
        Notes: { maxlength: 255 }
    },
    messages: {
        // ... omitted for brevity
    },
    submitHandler: function (form) {
        saveObject(form);
    }
});

Using fiddler I am able to see that a call is made to the server and that the server is returning a json true/false value depending on the case as in the following sample:

{"d":false}

or

{"d":true}

Despite this, the plugin still mark the field as invalid. Any suggestion?

EDIT: this is my server function

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class MyService : System.Web.Services.WebService
{
    [WebMethod]
    public object IsValidCode(string umltCode)
    {
        [...]

        if (u != null)
            return false;

        return true;
    }
}

I think, the `remote` function should return either true or false, and it returns an object `{d: true}` instead. — Zruty, Aug 09 '11 at 15:53

score 7 · Accepted Answer · edited Aug 09 '11 at 20:46

7

The problem is that instead of

true

your web service returns

{"d":true}

The d property should be removed.

ASMX is considered legacy so I would get rid of it at the first place. But until then you could also use the dataFilter property, like this:

remote: function() {  
    return {  
        type: "POST",
        url: GetBaseWSUrl() + 'MyService.asmx/IsValidCode',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: JSON.stringify({ umltCode: $('#Code').val() }),
        dataFilter: function (data) {
            var x = (JSON.parse(data)).d;
            return JSON.stringify(x); 
        }  
    };   
}

edited Aug 09 '11 at 20:46

Lorenzo

29,081
49
125
222

answered Aug 09 '11 at 15:53

Darin Dimitrov

1,023,142
271
3,287
2,928

Could you suggest how to do this, for an `asmx` service? I think this is how the `bool` type answer is JSON-serialized. – Zruty Aug 09 '11 at 15:56
@Zruty, ASMX is considered legacy technology. I wouldn't bother with it. If I had to invoke such a service I would write a server side wrapper around it in order to have full control of the output. – Darin Dimitrov Aug 09 '11 at 15:58
@Darin Dimitrov: thanks for your answer. How can I remove that? I have edited my question to add the server function prototype. I have an asmx webservice.... :( – Lorenzo Aug 09 '11 at 15:59
@Lorenzo, you would replace it with a WCF web service or you would write a custom HTTP Handler which invokes the service internally and which returns the result properly formatted. Or simply use a server side HTTP handler .ASHX which will perform the validation. – Darin Dimitrov Aug 09 '11 at 16:02
@Darin Dimitrov: I had to slightly modify your answer because the function want a json true value but you were on the right way. Thanks a lot! – Lorenzo Aug 09 '11 at 20:47

Problem with jQuery validate plugin (remote validation)

1 Answers1

Linked