Geek Answers Handbook

Jquery validate: custom validation rule

I want this form to make the "Nombre" field mandatory only if the user selects "S" as the answer to the selection question. In addition, if the user selects “S”, either email or telephone should be provided (in teléfono).

I use the validate plugin and did not find a document in which a similar rule was encoded. How can I encode this?

Looking at the documentation , I think I need to encode either the required(dependency-expression) method or required(dependency-callback) , but I don’t have which or how, because when I click on methods their documentation is 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"></script> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <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>
+4
source share
2 answers

You can see their demo page and see a hardcoded example of how to make this work. Fields are simply disabled using javascript if the selection is not selected, and attributes are disabled when the selection is selected.

Copy the jaws from the 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/

0
source

you need to create your own custom rule and add this class to both fields.

In js file:

 jQuery.validator.addMethod("newRuleOr", function(value, element) { if($('#recomiendaONo').val() == 'Si'){ return $('#emailRecomendado').val() != '' && $('#telefonoRecomendado').val(); } return true; }, "Telefono o mail deben informarse." );

And in your html code you need to add new classes to the fields.

 <input class="texto newRuleOr" id="nombreRecomendado" name="nombreRecomendado" type="text" size="30"/> ... <input class="texto newRuleOr" id="emailRecomendado" name="emailRecomendado" type="text" size="30"/>

One more tip: never use a table to style your page, use div, floats and percentage.

0
source

More articles:


All Articles