What's wrong with my Javascript/jQuery function?

Question

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>

Why not $(field + "_mark").html if you are using jQuery? field is not a variable? The code by itself makes no sense. — Dejan Marjanović
– Dejan Marjanović, Commented Aug 2, 2011 at 17:43
Why do you mix pure JavaScript with jQuery when you already have jQuery included (somewhere before the code you gave I presume)? Also what do you mean "whats wrong". What is happening and what is supposed to happen? — user188654
– user188654, Commented Aug 2, 2011 at 17:44

Dogbert · Accepted Answer · 2011-08-02 17:42:43Z

4

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.

answered Aug 2, 2011 at 17:42

Dogbert

224k43 gold badges419 silver badges416 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ek_ny · Accepted Answer · 2011-08-02 17:43:16Z

0

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

also you sure you need the #?

answered Aug 2, 2011 at 17:43

ek_ny

10.3k8 gold badges51 silver badges60 bronze badges

Comments

Nicola Peluchetti · Accepted Answer · 2011-08-02 17:44:13Z

0

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');

answered Aug 2, 2011 at 17:44

Nicola Peluchetti

76.9k32 gold badges150 silver badges197 bronze badges

Comments

Dennis · Accepted Answer · 2011-08-02 17:51:22Z

0

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.

answered Aug 2, 2011 at 17:51

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

Comments

Nappy · Accepted Answer · 2011-08-02 17:57:08Z

0

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>.

edited Aug 2, 2011 at 17:57

answered Aug 2, 2011 at 17:50

Nappy

3,04630 silver badges40 bronze badges

Comments

Eric · Accepted Answer · 2011-08-02 18:18:07Z

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');
    });
});

Mark · Accepted Answer · 2011-08-02 18:25:46Z

0

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.

answered Aug 2, 2011 at 18:25

Mark

2,1354 gold badges27 silver badges44 bronze badges

1 Comment

Mark Over a year ago

I added an extra line in the blur function to save the value of the field as a variable. I also modified your javascript to using jQuery selectors and functions.

Collectives™ on Stack Overflow

What's wrong with my Javascript/jQuery function?

7 Answers 7

Comments

Comments

Comments

Comments

Comments

HTML

jQuery

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

HTML

jQuery

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related