Sorry :( made a typo in the above code.. here is the right version..
$("#uploadform").validate({
rules: {
id11: {
required: true,
depends: function(element) {return
$("#id1").is(':visible') }
},
id12: {
required: true,
depends: function(element) {return
$("#id1").is(':visible') }
},
text1: {
required: true,
depends: function(element) {return
$("#id1").is(':visible') }
},
file1: {
required: true,
depends: function(element) {return
$("#id1").is(':visible')}
},
id21: {
required: true,
depends: function(element) {return
$("#id2").is(':visible') }
},
text2: {
required: true,
depends: function(element) {return
$("#id2").is(':visible') }
},
file2: {
required: true,
depends: function(element) {return
$("#id2").is(':visible') }
}
}
}
);
On May 3, 10:34 pm, ecognium <ecogn...@gmail.com> wrote:
> 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>
