Friday, May 10, 2024
 Popular · Latest · Hot · Upcoming
43
rated 0 times [  44] [ 1]  / answers: 1 / hits: 17471  / 14 Years ago, wed, may 19, 2010, 12:00:00

I have a simple html form that I've added validation to using the JQuery Validation plugin. I have it working for single fields that require a value. I now need to extend that so that if a user answers Yes to a question they must enter something in the Details field, otherwise the Details field can be left blank. I'm using radio buttons to display the Yes/No. Here's my complete html form - I'm not sure where to go from here:



    <script type=text/javascript charset=utf-8>
$.metadata.setType(attr, validate);
$(document).ready(function() {
$(#editRecord).validate();
});
</script>

<style type=text/css>
.block { display: block; }
form.cmxform label.error { display: none; }
</style>

</head>
<body>

<div id=header>
<h1>
Questions</h1>
</div>
<div id=content>
<h1>
Questions Page 1
</h1>
</div>
<div id=content>
<h1>
</h1>
<form class=cmxform method=post action=editrecord.php id=editRecord>
<input type=hidden name=-action value=edit>
<h1>
Questions
</h1>

<table width=46% class=record>
<tr>
<td width=21% valign=top class=field_name_left><p>Question 1</p></td>
<td width=15% valign=top class=field_data>
<label for=Yes>
<input type=radio name=Question1 value=Yes validate = required:true /> Yes
</label>
<label for=No>
<input type=radio name=Question1 value=No /> No
</label>
<label for=Question1 class=error>You must answer this question to proceed</label>
</td>
<td width=64% valign=top class=field_data><strong>Details:</strong>
<textarea id = Details1 class=where name=Details1 cols=25 rows=2></textarea></td>
</tr>
<tr>
<td valign=top class=field_name_left>Question 2</td>
<td valign=top class=field_data>
<label for=Yes>
<input type=radio name=Question2 value=Yes validate = required:true /> Yes
</label>
<label for=No>
<input type=radio name=Question2 value=No /> No
</label>
<label for=Question2 class=error>You must answer this question to proceed</label>
</td>
<td valign=top class=field_data><strong>Details:</strong>
<textarea id = Details2 class=where name=Details2 cols=25 rows=2></textarea> </td>
</tr>
<tr class=submit_btn>
<td colspan=3>
<input type=submit name=-edit value=Finish>
<input type=reset name=reset value=Reset> </td>
</tr>
</table>
</form>
</div>
</body>
</html>

More From » jquery

 Answers
7

On your <textarea> elements, add a dependency expression for required, for example for question 1, do this:



validate=required:'input[name=Question1][value=Yes]:checked'


This says if $('input[name=Question1][value=Yes]:checked').length > 0 then the field is required, so if Yes is checked, it's required :)



You can see a working demo here


[#96744] Monday, May 17, 2010, 14 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
santiago

Total Points: 375
Total Questions: 106
Total Answers: 97

Location: Argentina
Member since Thu, Mar 18, 2021
3 Years ago
;