Validate text fields based on checkbox value - jQuery validation
<p>I have a list of items and each item has a checkbox attached to it. I am currently using the jQuery form and validation plugin. I want to use it such that only if the user checks the checkbox , the text fields associated with that checkbox is validated else no validation is required.</p>

<p>Following is the code for demo</p>

<pre><code>&lt;form action='feeddatabase.php' method=post id='feedlisting'&gt;
&lt;input type=submit value='Submit!' name=submit&gt;

&lt;table border=2&gt;
    &lt;input type=text name='title1' size=100 style='display:none' value="Babes with curves are the new rage in Bollywood"&gt;
 &lt;tr&gt;
&lt;td rowspan="9"&gt;&lt;input type='checkbox' class='article_check'  name='selectArticle[]'   value=1 /&gt;&lt;/td&gt;
&lt;td colspan="2"&gt;&lt;h3&gt;&lt;u&gt;&lt;a href='http://www.santabanta.com/cinema.asp?pid=47880'&gt;Babes with curves are the new rage in Bollywood&lt;/a&gt;&lt;/u&gt;&lt;/h3&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;b&gt;Url&lt;/b&gt;&lt;/td&gt;
 &lt;td&gt;&lt;input type=text  class='article_req_info' name='url1' size=100 value='http://www.santabanta.com/cinema.asp?pid=47880'&gt;
                    &lt;input type=text style='display:none' name='blogurl1' size=100 value='http://www.santabanta.com/cinema.asp'&gt;
                    &lt;input type=text style='display:none' name='blogtitle1' size=100 value="Latest Bollywood news, Movie Review and Previews"&gt;
                    &lt;input type=text style='display:none' name='blogfeedurl1' size=100 value='http://www.santabanta.com/rss/cinema.asp?cat=Mirch Masala'&gt;&lt;/td&gt;

 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;b&gt;Author&lt;/b&gt;&lt;/td&gt;
 &lt;td&gt;&lt;input type=text  name='author1' size=100 value=''&gt;&lt;/td&gt;
 &lt;/tr&gt;

 &lt;tr&gt;
  &lt;td&gt;&lt;b&gt;Date&lt;/b&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=text name='date1' size=100 value='2011-7-08'&gt; &lt;/td&gt;
 &lt;/tr&gt;

 &lt;tr&gt;
 &lt;td&gt;&lt;b&gt;Desc&lt;/b&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type=text name='desc1' size=100 value="The curve is more powerful than the sword. And the one time sex goddess should know this from her experience..."&gt;
                    &lt;input type=text  style='display:none' name='html_content1'  value='The curve is more powerful than the sword. And the one time sex goddess should know this from her experience...'&gt;&lt;br&gt;&lt;/td&gt;
  &lt;/tr&gt;

 &lt;tr&gt;
 &lt;td&gt;&lt;b&gt;Featured&lt;/b&gt;&lt;/td&gt;&lt;td&gt;&lt;input type='checkbox' name='featuredArticle1' value=1 /&gt;&lt;/td&gt;
 &lt;/tr&gt;

 &lt;tr&gt;
 &lt;td&gt;&lt;b&gt;Category&lt;/b&gt;&lt;/td&gt;
 &lt;td&gt;&lt;select name="category1"&gt;
&lt;option value="Technology"  &gt;Technology&lt;/option&gt;
&lt;option value="Social" &gt;Social&lt;/option&gt;
&lt;option value="Entertainment"selected &gt;Entertainment&lt;/option&gt;
&lt;option value="Gaming"  &gt;Gaming&lt;/option&gt;
&lt;option value="News"  &gt;News&lt;/option&gt;
&lt;option value="Sports"  &gt;Sports&lt;/option&gt;
&lt;option value="Videos"  &gt;Videos&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;
 &lt;/tr&gt;

 &lt;tr&gt;
 &lt;td&gt;&lt;u&gt;Tags: &lt;/u&gt;&lt;/td&gt;
 &lt;td&gt;&lt;input type=text name='tag1' size=100 value='new rage,curves,babes'&gt;&lt;/td&gt;
 &lt;/tr&gt;

 &lt;tr&gt;
 &lt;td&gt;&lt;u&gt;Images for the post from Content/Google/Default&lt;/u&gt;&lt;/td&gt;
 &lt;td&gt;&lt;input type=radio name="group1" checked value='http://media.santabanta.com/newsite/cinemascope/images/sonakshi24_big.jpg' \&gt;
 &lt;/td&gt;
 &lt;/tr&gt;

 &lt;/table&gt;
&lt;/form&gt;
</code></pre>

<p>The jquery am using is as follows</p>

<pre><code>&lt;html&gt; 
&lt;head&gt; 

 &lt;script type="text/javascript" src="../javascripts/jquery.js"&gt;&lt;/script&gt; 
&lt;script type="text/javascript" src="../javascripts/jquery.form.js"&gt;&lt;/script&gt; 
&lt;script type="text/javascript" src="../javascripts/jquery.validate.js"&gt;&lt;/script&gt; 
&lt;script type="text/javascript" src="../javascripts/jquery.loady.js"&gt;&lt;/script&gt; 


&lt;script type="text/javascript"&gt;

 /* $("#loader").loady({
                    url: "sharer.php"
                }); */ 

$(document).ready(function() { 
    // bind form using ajaxForm 

        /* $(this).loady({
                    url: "sharer.php"
                }); */


        $('.article_check').click(function() {

             rules: {
                article_info: {
                    required: true,

                };  
            }
            });

});
&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;

&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>Please corect me if i am wrong somewhere...</p>

<p>EDIT:</p>

<p>now am using the below script</p>

<pre><code> &lt;script&gt;

  $(document).ready(function(){
  $("#feedlisting").validate();
  }); 



 function countChecked() {
  var n = $("input[name='selectArticle[]']:checked").length;
  var v = $("input[name='selectArticle[]']:checked").val();

  if(v)
  {
  alert(v);
  alert("url"+v);
  $("#url"+v).addClass('required url');
  }
  else
  {

$("#url"+v).removeClass('required url');
  }
  $("div").text(n + (n &lt;= 1 ? " is" : " are") + " checked!" + " value :" + v);
}
//countChecked();
$("input[name='selectArticle[]']:checkbox").click(countChecked);
&lt;/script&gt;
</code></pre>

<p>Its working great except that when I uncheck, the removeClass thing isnt working. When I check it dynamically adds the 'required url' class but when I uncheck, doesnt remove it. Am I doing something wrong?</p>
