jquery validate: custom validation rule
Question
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"></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>¿Recomendarí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í</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é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>
2 answers
solution1
0 2016-03-04 13:45:01
you need to create your own custom rule, and add this class to your both fields.
In your 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 have to add the 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"/>
Another tip, never use table to styling your page, use divs, floats, and percentage.
solution2
0 2010-09-09 18:45:49
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);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.