Sorry, the above code did not have any metadata. I tried it with the
rule specification and it works when both the "file" and "text"
elements are missing. But then when I enter the value for one of them
and hit Submit, the form gets submitted. I am not sure what I am doing
wrong... Please let me know what i am doing wrong... thanks!
$("#uploadform").validate({
rules: {
id11: {
required: true,
depends: function(element) {return
$("#id1").is(':visible') }
},
id12: {
required: true,
depends: function(element) {return
$("#id2").is(':visible') }
},
text1: {
required: true,
depends: function(element) {return
$("#id1").is(':visible') }
},
text2: {
required: true,
depends: function(element) {return
$("#id2").is(':visible') }
},
file1: {
required: true,
depends: function(element) {return
$("#id1").is(':visible')}
},
file2: {
required: true,
depends: function(element) {return
$("#id2").is(':visible') }
}
}
}
);
On May 3, 6:54 pm, ecognium <ecogn...@gmail.com> wrote:
> 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>
