views:

96

answers:

2

Hello,

I've coded a simple form for a friend's hobby; basically, we are trying to guess the starting lineup for a couple of teams in the 2010 FIFAWorld Cup (just for the kicks).

Anyway, I need to validate the following form. All the Javascript functions appear to function well because if i just call them outside of the tag, everything works fine. Now, i want to perform some basic client-side validation (i know, it isn't safe blabla but it's a hobby, so it isn't relevant) and then pass the form to another page where a PHP (currently using WAMP Server 2.0) script will collect the data and store it in the database.

Here's the form:

<form name ="formPT" id="formPT" action="" onsubmit="return ValidaTudo();" method="post">
<a><img src="icons/paises/portugal-flag-icon.png" alt="portugal" border="0" style="vertical-align:middle"> Portugal</a>
<table id="tabela_PT" cellspacing="0" summary="Equipa">
<thead>
<tr>
<th scope="col" abbr="Nome" class="nobg">Nome</th>
<th scope="col" abbr="Posicao">Posição</th>
<th scope="col" abbr="Escolha">Escolha</th>
<th scope="col" abbr="Anterior">Escolha Anterior</th>
</tr>
</thead>
<tbody>
<tr><td scope="row" abbr="Jogador" class="spec">Eduardo</td><td>Guarda-redes</td><td><select  name="escolhaPT"><option value="EF">EF</option><option value="SP">SP</option><option value="NU" selected="selected">NU</option></select> </td><td>NU</td></tr>
<tr><td scope="row" abbr="Jogador" class="spec">Beto</td><td>Guarda-redes</td><td><select  name="escolhaPT"><option value="EF">EF</option><option value="SP">SP</option><option value="NU" selected="selected">NU</option></select> </td><td>NU</td></tr>
<tr><td scope="row" abbr="Jogador" class="spec">Daniel Fernandes</td><td>Guarda-redes</td><td><select  name="escolhaPT"><option value="EF">EF</option><option value="SP">SP</option><option value="NU" selected="selected">NU</option></select> </td><td>NU</td></tr>
<tr><td scope="row" abbr="Jogador" class="spec">Paulo Ferreira</td><td>Defesa</td><td><select  name="escolhaPT"><option value="EF">EF</option><option value="SP">SP</option><option value="NU" selected="selected">NU</option></select> </td><td>NU</td></tr>
<tr><td scope="row" abbr="Jogador" class="spec">Miguel</td><td>Defesa</td><td><select  name="escolhaPT"><option value="EF">EF</option><option value="SP">SP</option><option value="NU" selected="selected">NU</option></select> </td><td>NU</td></tr>
<tr><td scope="row" abbr="Jogador" class="spec">Ricardo Carvalho</td><td>Defesa</td><td><select  name="escolhaPT"><option value="EF">EF</option><option value="SP">SP</option><option value="NU" selected="selected">NU</option></select> </td><td>NU</td></tr>
<tr><td scope="row" abbr="Jogador" class="spec">Bruno Alves</td><td>Defesa</td><td><select  name="escolhaPT"><option value="EF">EF</option><option value="SP">SP</option><option value="NU" selected="selected">NU</option></select> </td><td>NU</td></tr>
<tr><td scope="row" abbr="Jogador" class="spec">Ricardo Costa</td><td>Defesa</td><td><select  name="escolhaPT"><option value="EF">EF</option><option value="SP">SP</option><option value="NU" selected="selected">NU</option></select> </td><td>NU</td></tr>
<tr><td scope="row" abbr="Jogador" class="spec">Fabio Coentrao</td><td>Defesa</td><td><select  name="escolhaPT"><option value="EF">EF</option><option value="SP">SP</option><option value="NU" selected="selected">NU</option></select> </td><td>NU</td></tr>
<tr><td scope="row" abbr="Jogador" class="spec">Pepe</td><td>Médio</td><td><select  name="escolhaPT"><option value="EF">EF</option><option value="SP">SP</option><option value="NU" selected="selected">NU</option></select> </td><td>NU</td></tr>
</tbody>
</table>        
<input type='submit' value='Check Field' />
</form>

Now for a bit of Javascript:

 function ValidaTudo()
{
    alert('debug: validating...')
    if(Valida('PT'))
    {
        alert('fine!');
        return true;
    }
    else
    {
        alert('useless validation message but wth');
        return false;
    }
}

There's more javascript functions, obviously, but:

  • I'm not getting any alert popup from that javascript function!
  • The page is, quite simply, redirected to index.php so i'm assuming it's a PHP/WAMP issue... i rebooted WAMP quite a couple of times, but no luck so far. I haven't reboot my PC although I think I should.

What am i missing? Thanks in advance guys!

PS: Yes, the form isn't sending the data to any page at all; i know that; it does not have any effect on the weird behavior, i've tried it.

Edit: Here's the rest of the validating functions. They are used to check if the user followed certains rules (e.g.: selecting exactly 11 players; 1 goal-keeper; at least 3 defenders, etc...). I'm passing a couple of parameters because in the full form we're trying to guess the players of 4 teams (Portugal, Spain, Brazil and Argentina) - hence 4 forms, each with a different ID (based on the nation's identifier -> {PT, BR, AR, ES} Here's the rest of the functions (keep in mind that they work outside of the form):

function Valida (textstring) 
{
    var error_msg = null; 

    if(!valida_11(textstring.toUpperCase()))
    {
        error_msg = 'Erro para a equipa ' + textstring.toUpperCase() + ': deve selecionar apenas 11 jogadores efectivos';
        alert(error_msg);
    }

    if (!valida_gk(textstring.toUpperCase()))
    {
        error_msg = 'Erro para a equipa ' + textstring.toUpperCase() + ': deve selecionar um e um só 1 guarda-redes efectivo';
        alert(error_msg);
    }

    if (!valida_def(textstring.toUpperCase()))
    {
        error_msg = 'Erro para a equipa ' + textstring.toUpperCase() + ': deve selecionar um mínino de 3 defesas efectivo';
        alert(error_msg);
    }

    if(error_msg == null)
        return true;
    else return false;
}

function valida_11(tbl)
{
    var ef = 0;
    var input_list = document.getElementsByName('escolha' + tbl);

    for(var i = 0; i < input_list.length; i++) 
    {
        var a = input_list[i].value;
        if(a == "EF")
            ef++;
    }

    if (ef == 11)
        return true;
    else return false;
}

function valida_gk(tbl)
{   
    var ef = 0;
    var gks = conta_gks(tbl);
    var input_list = document.getElementsByName('escolha' + tbl);

    for(var i = 0; i < gks; i++) 
    {
        var a = input_list[i].value;
        if(a == "EF")
            ef++;
    }

    if (ef == 1)
        return true;
    else return false;
}

function valida_def(tbl)
{
    var defs = conta_defs(tbl);
    var gks = conta_gks(tbl);

    var ef = 0;
    var input_list = document.getElementsByName('escolha' + tbl);

    for(var i = gks-1; i < gks + defs; i++) 
    {
        var a = input_list[i].value;
        if(a == "EF")
            ef++;
    }

    if (ef >= 3)
        return true;
    else return false;
}

function conta_defs(tbl)
{
    var defs = 0;
    var tabela = document.getElementById('tabela_' + tbl);

    for(var i = 1; i < tabela.getElementsByTagName("tr").length; i++)
    {
        var linha = tabela.getElementsByTagName("tr")[i];
        var celula = linha.getElementsByTagName("td")[1];

        if(celula.innerHTML == "Defesa")
            defs++;
    }

    return defs;
}


function conta_gks(tbl)
{
    var gk = 0;
    var tabela = document.getElementById('tabela_' + tbl);

    for(var i = 1; i < tabela.getElementsByTagName("tr").length; i++)
    {
        var linha = tabela.getElementsByTagName("tr")[i];
        var celula = linha.getElementsByTagName("td")[1];

        if(celula.innerHTML == "Guarda-redes")
            gk++;
    }

    return gk;
}

Edit 2: The same happens in other browsers, like IE 7. Edit 3: Rebooted the PC but the issue remains... :/

Okay, i managed to put the page online @: http://testing.freeoda.com/teste.html Give it a spin. Over here, i'm getting a 404 error; no JS function is called....

A: 

Bacause form is refreshing page even if there is no action="". Try to write instead onsubmit="return ValidaTudo();" this: action="javascript:ValidaTudo();" )))

GOsha
Nop, doesn't work.
Hal
and where is ";" after `alert('debug: validating...')` you missed it?
GOsha
Nice call; yes, it was missing from the test page. Strangely enough, no error is being outputted!Still, it's not working :(
Hal
you can use opera error console and opera dragnfly to locate js bugs.
GOsha
Or i can open Firefox's console and use Firebug to locate bugs... which i did. And *still* it doesn't work.
Hal
if `<form name ="formPT" id="formPT" action="javascript:ValidaTudo();" method="post">` returns false;)))
GOsha
So it works over there.... why the hell isn't it working over here?
Hal
By the way, I placed a copy of the test file online (check the question). Does it work over there?
Hal
My fault, i made a silly mistake by trusting a 3rd party code.... sorry dude, thanks for your help.
Hal
A: 

Well, this is embarrassing... My bad. I've fucked up because Ii'm using a crappy menubar made by another programmer who forgot to close the tag; everything was working as it was supposed to, because the actual form we're seeing was actually inside another one. /facepalm

My apologies to you all, thank you for your time and patience.

Hal
I hate it when you spend time working through PHP, JavaScript, CSS, etc. and it turns out the problem is malformed HTML!
Alex JL
Indeed. I lost 6 hours to this crap today.
Hal