Home/ Questions/Q 7793447
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T22:29:27+00:00

SOLVED Mailcheck uses the on method, which isn’t available in the outdated version of

  • 0

SOLVED

Mailcheck uses the “on” method, which isn’t available in the outdated version of JQuery that I was using. THANK YOU TO KUFI AND MARTIN.

I’m a beginner at Javascript/Jquery, and I am stuck trying to get this to work.

I have a working form on my website, where I would like to add this client-side spell-check for popular email domains. The id of the text field for the email address is simply “Email”, so I have made this little change (capital E).

So my code looks like this… with some test statements.

<script>
document.write("test0");
document.getElementById('testspan').innerHTML = 'test3';

var domains = ['hotmail.com', 'gmail.com', 'aol.com'];
$('#Email').on('blur', function() {
  $(this).mailcheck({
    domains: domains,   // optional

    suggested: function(element, suggestion) {
      // callback code
      document.getElementById('testspan').innerHTML = 'test4';
      document.write("test1");
    },

    empty: function(element) {
      // callback code
      document.write("test2");
    }

  });
});
</script>

The text “test0test3” does appear as expected, similar to what would happen if I did a PHP echo.

But nothing visibly happens when focus leaves the my email textbox.

I don’t know if I have given enough detail for someone to identify where I’ve gone wrong…

I don’t really understand what I am supposed to write in the place marked “//callback code”. Do I need to manually provide the code that would make the “Did you mean …” text appear as in their screenshot? enter image description here

Thank you, Kufi and Martin.
I have followed Kufi’s code, and also inserted 

<span id="suggestedEmail"></span>

after the email text input element. But nothing happens. Could someone suggest a suitable test statement I can write inside the callback function to definitively find out whether the code path is being exercised or not. I have a feeling it isn’t.

UPDATE 3

Thank you again Kufi and Martin,

I have not been able to get it to work, even after making a minimal .HTML file for testing… I feel that now, someone would be able to spot the error I have made.
Here is the entirety of my test file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Testing mailcheck</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.mailcheck.js"></script>
</head>

<body>

<form id="form1" name="form1" method="post" action="contactus_mail.php">
 Name: <input name="name" type="text" id="name" size="30"  /> </br>
 Email: <input name="email" type="text" id="email" size="30" />  <span id="suggestedEmail"></span> </br>
 Subject: <input name="subject" type="text" id="subject" size="72" value="" /> </br>
 <input name="Submit" type="submit" value="Submit"/>
</form>

</br>
<span id="testspan1"></span>
</br>
<span id="testspan2"></span>
</br>

<script type="text/javascript">
$("#testspan1").html("test1");
$(function() {
var domains = ['hotmail.com', 'gmail.com', 'live.com', 'yahoo.com'];
 $("#email").on('blur', function() {
  $(this).mailcheck({
    domains: domains,   // optional
    suggested: function(element, suggestion) {
      // callback code
      $("#suggestedEmail").html("Did you mean " + suggestion.full);
    },
    empty: function(element) {
      // callback code
      document.write("empty was called");
    }
  });
 });
});
$("#testspan2").html("test2");
</script>

</body>
</html>

Is there anything I have to check besides the reachability of the two external JS files? Jquery versions?

SOLVED!

I was getting:

Uncaught TypeError: Object #<Object> has no method 'on'

at the line that looks like:

$("#email").on('blur', function() {

This went away when I switched from using JQuery 1.3.2 to the current 1.7.2.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As I see it you have to write your own visual feedback as it is stated in their documentation:

    “You can use the callbacks to display the appropriate visual feedback to the user.” (Chapter “Usage” at the bottom).

    So you need something like this to show the suggested email:

    suggested: function(element, suggestion) {
    $("#suggestedEmail").html("Did you mean " + suggestion.full);
}

    Edit:
    To your updated question. Here is a working jsfiddle. If the posted javascriptcode is the actually used code you need to surround it with $(function() { //your code here });

    This code should work:

    $(function() {
    var domains = ['hotmail.com', 'gmail.com', 'aol.com'];
    $('#Email').on('blur', function() {
      $(this).mailcheck({
        domains: domains,   // optional

        suggested: function(element, suggestion) {
            $("#suggestedEmail").html("Did you mean " + suggestion.full);
        },
        empty: function(element) {
          document.write("test2");
        }
      });
    });
});

    The $(function() { ... }); needs to be used so that the code inside is is executed after the whole page has been loaded.

    • 0