views:

83

answers:

1

I want this form to make the field 'Nombre' required only if the user picks "Sí" as the answer to the select's question. Additionally, if the user selects "Sí", either an email or a phone (in teléfono) should be provided.

I'm using the validate plugin and haven't found a doc in which a similar rule has been coded. How can I code this?

Looking at the documentation, I think I need to code either a required(dependency-expression) or required(dependency-callback) method, but I don't which or how, since when clicking the methods their documentation appears missing =/

<html> 
<head>

<style type="text/css">

label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }

em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>



  <script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"&gt;&lt;/script&gt;

  <link rel="stylesheet" type="text/css" media="screen" href="mistylesheet.css" />
<script>
  $(document).ready(function(){
    $("#commentForm2").validate();
  });


  </script>

</head>
<body>
<form id="commentForm2">

     <center><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></center>    






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


    <center><input type="submit"></center>


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

You can look at their demo page and see hardcoded example how to make this work. Fields are just disabled with javascript, if selection is not selected, and when selection is selected disabled attributes are removed.

Copy paste from demo site:

//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
    topics[this.checked ? "removeClass" : "addClass"]("gray");
    topicInputs.attr("disabled", !this.checked);
});

http://jquery.bassistance.de/validate/demo/

newbie
Thanks, but this is not what I'm looking for.
omgzor