Hi All,
I am trying to use the validate plugin to validate a form but it
does not work..Could you please let me know what i am doing wrong?
The page starts with a simple drop down asking for the user to
choose a category. Once the category is chosen, a div block becomes
visibile. WHen the user clicks submits the form, I would like to
validate the form only for the visible elements. Since I was trying to
figure out how to use the validate plugin i was just calling the
plain .validate() call without any rules.. even that does not work.. I
also tried removing the category selection and kept all the form
elements visible.. even then I was able to get it to work...
I am attaching the HTML code with the jquery validate call.. could
you please let me know what i should do to make this work?
Thanks!
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"; >
<head>
<title> Validate </title>
<meta http-equiv="Content-type"
content="text/html;charset=UTF-8" /
>
<script type="text/javascript"
src="include/jquery-1.3.2.min.js"></
script>
<script type="text/javascript" src="include/
jquery.validate.pack.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("#uploadform").validate();
$('#id1').hide();
$('#id2').hide();
if ($('#category').val() == 'v1')
$('#id1').show();
else if ($('#category').val() == 'v2')
$('#id2').show();
$('#category').change(function() {
if ($(this).val() == 'none') {
$('#id1').hide();
$('#id2').hide();
} else if ($(this).val() == 'v1') {
$('#id1').show();
$('#id2').hide();
} else if ($(this).val() == 'v2') {
$('#id1').hide();
$('#id2').show();
}
});
});
// -->
</script>
</head>
<body>
<div id="categ-container">
<div id="categ-content">
<div>
<p>Select your category to get started. </p>
<label> Category </label>
<select id="category">
<option value="none" ></option>
<option value="v1" > V1 </option>
<option value="v2" > V2 </option>
</select>
<p></p><p></p>
</div>
<form id="uploadform" method="post" action="#">
<div id="id1">
<table border="0" >
<tr><td><label> Location </label> </td>
<td><input type="file" name="file1"/></td></tr>
<tr><td><label> Cat1 </label> </td>
<td>
<select id="id11" name="cat1">
<option value="v1" > Value1 </option>
<option value="v2" > Value2 </option>
</select>
</td></tr>
<tr><td><label> Cat2 </label> </td>
<td>
<select id="id12" name="cat2">
<option value="v3" > Value3 </option>
<option value="v4" > Value4 </option>
</select>
</td></tr>
<tr><td> <label>Text:</label></td>
<td><input type="text" name="text1" id="text1" /> </td> </tr>
</table>
</div>
<div id="id2">
<table border="0" >
<tr><td><label> Location </label> </td>
<td><input type="file" name="file2"/></td></tr>
<tr><td><label> Cat3 </label> </td>
<td>
<select id="id21" name="cat3">
<option value="v5" > Value5 </option>
<option value="v6" > Value6 </option>
</select>
</td></tr>
<tr><td> <label>Text:</label></td>
<td><input type="text" name="text2" id="text2" /></td></tr>
</table>
</div>
<p><input type="submit" value="submit" /></p>
</form>
</div>
</div>
</body>
</html>
</code>
