CODEWITHSUNDEEP
jqueryjquery-validate
Peter Smartt
Peter Smartt

Reputation: 358

JQuery Validation Uncaught typeError when applying custom message to remote validation

I am trying to validate remotely whether a string already exists on the server using the jqueryvalidation.org plugin.

Here is my jQuery code:

$("#title").rules("add", {
    "remote": {
        url: checkTitleAvailable.php,    // echoes "true" or "false"
        type: "post",
        data: {
            proposedSeoTitle:function() {
                return $('#title').val();
            }
        },
        complete: function(response) {
            if (response.responseText != "true" && response.responseText != "false") {
                alert("unexpected response " + response.responseText);
            }
            return response;
        }
    },
    "messages": {"remote": "That title already exists"}
});

('title' is an input field with id="title" class="required")

I get an error:

"Uncaught TypeError: Cannot call method 'call' of undefined".

"messages" gets treated as another rule, but there is no function to run. Yet it still gets treated as a message, and tends to pop up when it should, but the error makes the whole system unusable - it is impossible to validate the whole page before saving it.

Am I doing something wrong, or is this a bug within the Validation plugin? Is there some workaround? Should I be looking to hack the plugin to get it working?

Upvotes: 0

Views: 536

Answers (1)

Sparky
Sparky

Reputation: 98728

Quote OP:

'title' is an input field with id="title" class="required"

Even though you're using the .rules('add') method to declare your rules on the field, the plugin still mandates that every input field have a (unique) name attribute. It's how the plugin keeps track of inputs.

See the Markup recommendations section of the Reference Docs page...

The name attribute is 'required' for input elements, the validation plugin doesn't work without it.

Your code:

"remote": {
    url: checkTitleAvailable.php,    // echoes "true" or "false"
    type: "post",
    data: {
        proposedSeoTitle:function() {
            return $('#title').val();
        }
    },
    complete: function(response) {
        if (response.responseText != "true" && response.responseText != "false") {
            alert("unexpected response " + response.responseText);
        }
        return response;
    }
}

I'm not really sure what you're trying to do with the complete callback here. The plugin's remote rule is automatically evaluating the response from the server, but yet you're also evaluating if the response is boolean and returning the response.

As per the documentation, the remote method is looking for true for a validated field. Or when the server response is a false, undefined, null, or a string, it's evaluated as an invalid field, where the string itself over-rides the default error message. Given that the plugin already evaluates the server response, you would never need to manually evaluate the response using a complete callback. Otherwise, you might as well write your own remote method from scratch instead of using the one from the plugin.

The serverside resource is called via jQuery.ajax (XMLHttpRequest) and gets a key/value pair corresponding to the name of the validated element and its value as a GET parameter. The response is evaluated as JSON and must be true for valid elements, and can be any false, undefined or null for invalid elements, using the default message; or a string, eg. "That name is already taken, try peter123 instead" to display as the error message.

Remove your complete callback and see what happens.

remote: { // <-- quotation marks not required.
    url: checkTitleAvailable.php,    // echoes "true" or "false"
    type: "post",
    data: {
        proposedSeoTitle:function() {
            return $('#title').val();
        }
    }
},
messages: { // <-- quotation marks not required.
    // quotation marks not required around `remote`.
    remote: "That title already exists"
}

BTW - quotation marks around rules, messages and other options is not required.

Upvotes: 1

Related Questions