views:

29

answers:

2

I wrote simple custom validation on javascript based on this doc. I want it to display an alert if a select has been chosen on "Si" and the text fields are left blank. I don't get why it isn't displaying the message.

<html> 
<head>


<link rel="stylesheet" type="text/css" media="screen" href="mistylesheet.css"/>

<script type ='text/javascript'>

function mivalidate (elem1, elem2, elem3, elem4) {


     if(elem1.value=="Si")&&(elem2.value.length==0)&&( (elem3.value.length==0)||(elem4.value.length==0)){

        alert("Por favor, especifique un nombre y un email o tel&eacute;fono de contacto en su recomendaci&oacute;n ");
        elem1.focus();
        return false;
      } else {

        return true;
    }


}



</script>

</head>
<body>
<form onsubmit='return mivalidate(document.getElementById("recomiendaONo"),document.getElementById("nombreRecomendado"), document.getElementById("emailRecomendado"), 
 document.getElementById("telefonoRecomendado"))'>

     <table class="layouttable">

        <tr class='row1'><td> <b>&#191;Recomendar&iacute;a nuestros servicios a otra empresa o persona?  </b></td></tr>
        <tr class='row2'><td> 



        <select id = "recomiendaONo" name="recomiendaONo" class="required">
           <option value="">Seleccione su respuesta</option>
             <option value="Si">S&iacute;</option>
         <option value="No">No</option>

        </select>



        </td></tr>


  </table>    






<div class='margenrecomendaciones'>
<table>

<tbody>


<tr>



<td><div align="left">Nombre:</div></td> 

<td><div align="left"><input class="texto" id="nombreRecomendado" name="nombreRecomendado" type="text" size="30"/></div></td>

</tr>      




<td><div align="left">Email:</div></td>

<td><div align="left"> <input  class="texto" id="emailRecomendado" name="emailRecomendado" type="text" size="30"/></div></td>




</tr>

<tr>



<td><div align="left">Tel&eacute;fono:</div></td>

<td><div align="left"> <input class=" texto" name="telefonoRecomendado" id="telefonoRecomendado" type="text" size="30"/></div></td>




</tr>


</tbody>

</table>
</div>

    <input type="submit"/>


</form>
</body>
</html>
A: 

You need to enclose whole if condition into braces:

if (...) {
    alert(...);
}

And I always suggest to use firebug or similar tool in such cases: it will show you all javascript errors in a very clear way.

Nikita Rybak
it's actually the parentheses
omgzor
@dmindreader whatever you name them, it doesn't change the point
Nikita Rybak
It does change it, as you use both in your example. I missed the parentheses in my code and that was the fault.
omgzor
A: 

You need to wrap your entire if statement in parentheses.

This:

if (elem1.value == "Si") && (elem2.value.length == 0) && ((elem3.value.length == 0) || (elem4.value.length == 0))

should be:

if ((elem1.value == "Si") && (elem2.value.length == 0) && ((elem3.value.length == 0) || elem4.value.length == 0)))

(I also added spaces around the operators and after the if to make everything more clear and readable, and you should as well. Also, using a text editor or IDE that shows matching braces really helps keep track of them.)

musicfreak
heh, I did realize it with an editor (gedit). I was about to post this as an answer to my own question. Thanks.
omgzor