Question

I have written this code in javascript however I have to make it work using JQuery, I have included both the javascript function and the jquery attempt but i can’t figure out what is wrong with my jquery attempt could someone please help me?

Javascript working:

function done()
{
    var valid = document.getElementById("text2").value.length;
    if (valid > 5)
    {
        document.getElementById('one').innerHTML += "<div class='done rotateone wiggler'></div>";
        document.getElementById('one').className += "grey";
    }

Jquery attempt:

$(document).ready(function(){
    //Validates the title field is at least 5 characters long.
    $("#text2").done(function(){
        var value = $(this).val();
        if (value.length >= 5)
        {
            $("#one").append("<div class='done'></div>");
        }
    });

Answer 1

Looks like you want to execute your function right away? (look at the edit to see why I added the .blur() event handler) Well, here is how I’d do it:

$(document).ready(function() {
    $('#text2').blur(function() { // Listen to the "onblur" event on the element
        if (this.value.length > 5) { // No need for jQuery there
            $('#one')
                .append('<div class="done"></div>')
                .addClass('grey')
        }
    })
})

See how I use one call only to the DOM by chaining functions on a single element? That’s practical and efficient.

Btw, innerHTML is bad for many reasons (including performance), prefer .append() in jQuery and .appendChild() in javascript.

Edit: looks like you want this to activate on the onblur event. I edited my code.