element.setCustomValidity does not seem to work

Question

I have a change event on an email field that is supposed to validate that the email address is unique using an ajax call. The problem is that it is telling me that the element does not support the setCustomValidity method. Please Help.

$("#tbEmail").change(function (event) {
    var obj = new Object();

    obj.email = $("#tbEmail").val();
    var params = JSON.stringify(obj);

    $.ajax
    (
        {
            type: "POST",
            url: "./controllers/Consumer.aspx/validateEmail",
            data: params,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                if (result.d != 0) {

                    var element = $("#tbEmail");
                    element.setCustomValidity('The email address entered is already registerd.');
                    alert(element.checkValidity());
                    alert(element.validationMessage);
                }
                else {
                    $("#tbEmail").setCustomValidity("");
                };
            },
            error: function (result) { ProcessError(result) }
        }
    );

})

Answer 1

setCustomValidity is DOM API not jQuery API. In your code you are trying to call it on jQuery instance. So you need to first get the DOM element instance & then call the API.

Also it needs to be HTML5 compliant browser and a form.

 var element = $("#tbEmail")[0];
 element.setCustomValidity('The email address entered is already registerd.');

Answer 2

A simpler approach to this, adding "[0]":

$("#tbEmail")[0].setCustomValidity("")

Answer 3

use get(0).

    var element = $("#tbEmail").get(0);
    element.setCustomValidity('The email address entered is already registerd.');