What's wrong with my Javascript/jQuery function?

I presume it'll be rather obvious...

<script type="text/javascript">
$(document).ready(function(){

function textValidate(field) {
    $("field").blur(function(){
        var alphaExp = /^[a-zA-Z\sàèìòùáéíóúäëïöüñãõåæøâêîôû-]+$/;
        if (f_name.value.length > 1 && f_name.value.match(alphaExp)) {
            document开发者_运维百科.getElementById(field+"_mark").innerHTML = "<img src='images/icons/tick.png' class='mark'>";
        }
        else {
            document.getElementById(field+"_mark").innerHTML = "<img src='images/icons/cross.png' class='mark'>";
        }
    });
}

textValidate(#f_name);
textValidate(#l_name);

});
</script>

EDIT: my HTML...

<p>First name</p>
<input type="text" id="f_name"> <span id="f_name_mark"></span>
<p>Last name</p>
<input type="text" id="l_name">  <span id="f_name_mark"></span>

My intention is for the <span> to be populated by the cross or tick accordingly. At the moment I am getting no change, although I had this working when it was not a function and just straight-forward code applied to #f_name, like so:

<script type="text/javascript">
$(document).ready(function(){
    $("#f_name").blur(function(){
        var alphaExp = /^[a-zA-Z\sàèìòùáéíóúäëïöüñãõåæøâêîôû-]+$/;
        if (f_name.value.length > 1 && f_name.value.match(alphaExp)) {
            document.getElementById("f_name_mark").innerHTML = "<img src='images/icons/tick.png' class='mark'>";
        }
        else {
            document.getElementById("f_name_mark").innerHTML = "<img src='images/icons/cross.png' class='mark'>";
        }
    });
});
</script>

---

textValidate(#f_name);
textValidate(#l_name);

should be

textValidate("#f_name");
textValidate("#l_name");

and

$("field").blur(function(){

should be

$(field).blur(function(){

And I'm not sure where you're getting the variable f_name from.

---

textValidate("#f_name");
textValidate("#l_name");

also you sure you need the #?

---

i thibk there is a type here:

    if (f_name.value.length > 1 && f_name.value.match(alphaExp)) {
        document.getElementById(field+"_mark").innerHTML = "<img src='images/icons/tick.png' class='mark'>";
    }

should be

    if (field.value.length > 1 && field.value.match(alphaExp)) {
        document.getElementById(field+"_mark").innerHTML = "<img src='images/icons/tick.png' class='mark'>";
    }

one here:

    $("field").blur(function(){

should be

       $(field).blur(function(){

and

textValidate(#f_name);
textValidate(#l_name);

should be

textValidate('#f_name');
textValidate('#l_name');

---

Among the other answers, you're using a jQuery selector which expects #myId, and getElementById which expects myId. Prepending the pound sign will not return the element you are looking for.

---

You cannot use CSS selectors in document.getElementById(id)

Use

$(field + "_mark").html("<img src='images/icons/tick.png' class='mark'>");

instead.

Also your textValidate function must take a string:

textValidate("#f_name");
textValidate("#l_name");

Also instead of f_name.value you probably mean (if you are not developing for IE only..)

$("#f_name").val()

or

$(field).val()

, not sure.

Finally, your <input> elements are missing their end tags </input>.

---

Here's a slightly modified version of your code:

$.fn.textValidate = function() {
    this.blur(function() {
        var alphaExp = /^[a-zA-Z\sàèìòùáéíóúäëïöüñãõåæøâêîôû-]+$/;
        var mark = $(this).next('span');

        if ($(this).val().match(alphaExp))
            mark.html("<img src='images/icons/tick.png' class='mark'>");
        else
           mark.html("<img src='images/icons/cross.png' class='mark'>");
    });
}


$(document).ready(function() {  
    $('#f_name').textValidate();
    $('#l_name').textValidate();
});

However, the structure of your HTML is flawed here. A much better way of writing everything can be see here.

---

HTML

<label>First name
    <input type="text" id="f_name" />
    <img class="mark" />
</label>
<label>Last name
    <input type="text" id="l_name" />
    <img class="mark" />
</label>

jQuery

$(document).ready(function() {
    $('#f_name, #l_name').blur(function() {
        var alphaExp = /^[a-zA-Z\sàèìòùáéíóúäëïöüñãõåæøâêîôû-]+$/;
        var mark = $(this).next('.mark');

        if ($(this).val().match(alphaExp))
            mark.attr('src', 'images/icons/tick.png');
        else 
            mark.attr('src', 'images/icons/cross.png');
    });
});

---

The jQuery blur function is invoked using a jQuery Object. This means that your function will fail if you call it using

textValidate(#f_name);

f_name is neither a string nor a jQuery object. To solve your problem, I understand you are trying to make your function as generic as possible so that it can be applied to other fields. Try this:

function textValidate(field) {
    $(field).blur(function(){
        var value = $(field).val();
        var alphaExp = /^[a-zA-Z\sàèìòùáéíóúäëïöüñãõåæøâêîôû-]+$/;
        if (value.length > 1 && value.match(alphaExp)) {
            $(field+"_mark").html = "<img src='images/icons/tick.png' class='mark'>";
        }
        else {
            $(field+"_mark").html = "<img src='images/icons/cross.png' class='mark'>";
        }
    });
}

Now all you have to do to call this function is to pass the css selector as the argument:

textValidate("#f_name");

Take note that the argument is a string. That's it.