根据复选框值验证文本字段 - jQuery 验证答案

【问题标题】：Validate text fields based on checkbox value - jQuery validation根据复选框值验证文本字段 - jQuery 验证
【发布时间】：2011-07-11 23:28:12
【问题描述】：

我有一个项目列表，每个项目都附有一个复选框。我目前正在使用 jQuery 表单和验证插件。我想使用它，只有当用户选中复选框时，与该复选框关联的文本字段才会被验证，否则不需要验证。

下面是演示代码

<form action='feeddatabase.php' method=post id='feedlisting'>
<input type=submit value='Submit!' name=submit>

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

 </tr>
 <tr>
 <td><b>Author</b></td>
 <td><input type=text  name='author1' size=100 value=''></td>
 </tr>

 <tr>
  <td><b>Date</b></td><td><input type=text name='date1' size=100 value='2011-7-08'> </td>
 </tr>

 <tr>
 <td><b>Desc</b></td>
  <td><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...">
                    <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...'><br></td>
  </tr>

 <tr>
 <td><b>Featured</b></td><td><input type='checkbox' name='featuredArticle1' value=1 /></td>
 </tr>

 <tr>
 <td><b>Category</b></td>
 <td><select name="category1">
<option value="Technology"  >Technology</option>
<option value="Social" >Social</option>
<option value="Entertainment"selected >Entertainment</option>
<option value="Gaming"  >Gaming</option>
<option value="News"  >News</option>
<option value="Sports"  >Sports</option>
<option value="Videos"  >Videos</option></select></td>
 </tr>

 <tr>
 <td><u>Tags: </u></td>
 <td><input type=text name='tag1' size=100 value='new rage,curves,babes'></td>
 </tr>

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

 </table>
</form>

我使用的jquery如下

<html> 
<head> 

 <script type="text/javascript" src="../javascripts/jquery.js"></script> 
<script type="text/javascript" src="../javascripts/jquery.form.js"></script> 
<script type="text/javascript" src="../javascripts/jquery.validate.js"></script> 
<script type="text/javascript" src="../javascripts/jquery.loady.js"></script> 


<script type="text/javascript">

 /* $("#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,

                };  
            }
            });

});
</script>
 </head>
 <body>

</body>

</html>

如果我在某处错了，请纠正我...

编辑：

现在正在使用下面的脚本

 <script>

  $(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 <= 1 ? " is" : " are") + " checked!" + " value :" + v);
}
//countChecked();
$("input[name='selectArticle[]']:checkbox").click(countChecked);
</script>

它工作得很好，只是当我取消选中时，removeClass 事情不起作用。当我检查它时，它会动态添加“必需的 url”类，但是当我取消选中时，不会删除它。我做错了吗？

【问题讨论】：

标签： php jquery

【解决方案1】：

几个选项：
1. add a custom rule 用于验证文本字段；您的验证功能将检查复选框的值，然后才验证文本字段。
2. 在复选框中添加onchange 事件，这将在相关文本字段中添加/删除类'required'（请记住，验证规则也可以使用类属性在标记中定义）

编辑
针对您的问题，这里有一个简单的解决方案：

我假设您有一个要更改的文本字段的静态（= 预先知道）列表。例如 - 如果这些字段是 txtName 和 txtAddress，您的代码可能类似于：

$("#checkBox").change(function () { 
     if ($("#checkBox").val() {
          //if checkbox is checked- add the 'required' class
          $("#txtName").addClass('required');
          $("#txtAddress").addClass('required');
     }
     else {
          //if checkbox is unchecked- remove the 'required' class
          $("#txtName").rmeoveClass('required');
          $("#txtAddress").removeClass('required');
     }
});

【讨论】：

ok...onchange 事件目前似乎是合理的，因为我能够获取所获取的复选框的值。这个值代表一些 id。假设我选中的复选框的值为 1，然后该复选框下的所有输入文本字段的名称都像 title1、headline1、dw1 ......等等。那么我如何对 onchange 事件进行编码以便我可以添加“必需”属性仅附加到这些复选框的字段。很抱歉，我是 javascript 和 jQuey 的新手……不擅长用这种语言编码 :(
非常感谢 sJhonny....如果我错了，请纠正我。我有一个已知文本字段和下拉列表、复选框和选择字段的列表。只是每个集合都有一个动态名称...我可以像这样修改上面的代码吗.. $("#txtName"+$("#checkBox").val()).addClass('required') ??
你可以，但我几乎不推荐它。如果你知道你的控件的全名——为什么不使用它呢？如果所有字段都提前知道 - 为什么不提前命名它们？顺便说一句-我真的建议不要在变量/控件名称中使用数字。
实际情况是，我知道每页最多可以选择 10 篇文章（复选框）。这些文章中的每一篇都将有 3 个文本字段。例如： checkbox1 将有 txt_fld1_1 txt_fld2_1 txt_fld3_1 和 checkbox2 将有 txt_fld1_2,txt_fld2_2,txt_fld3_2 等等。在运行时，用户可以选择任何复选框，并且根据复选框的值，我知道使用哪个后缀来描述这些字段。只需检查我在原始问题中发布的代码，您就会意识到我的情况。对于这种情况，您有更好的解决方案吗？感谢朋友的建议:)
在原始问题中观看我的编辑。让它部分工作，但需要你的帮助