驗證基於複選框值的文本字段 - jQuery驗證

我有一個項目列表，每個項目都有一個複選框附加到它。我目前使用jQuery表單和驗證插件。我想要使用它，只有當用戶選中複選框時，與該複選框關聯的文本字段纔會生效，否則不需要驗證。驗證基於複選框值的文本字段 - 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>

請corect我，如果我錯了地方......

編輯：

現在我正在使用下面的腳本

<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的東西沒有工作。當我檢查它動態添加'所需的網址'類，但是當我取消選中，不刪除它。難道我做錯了什麼？

來源

2011-07-09 Sunny D' Souza

幾個選項：
1. add a custom rule用於顯示文本字段;您的驗證功能將檢查複選框的值，然後才驗證文本字段。
2.一個onchange事件添加到複選框，這將增加/從相關的文本字段中刪除類'required'（記住，驗證規則還可以在標記中使用類屬性進行定義）

EDIT
回答你的問題，這裏有一個簡單的解決方案：

我假設你有一個靜態（=預先知道）你想改變的文本框列表。對於示例 - 如果這些字段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'); 
    } 
});

來源

2011-07-09 20:27:05

確定... onchange事件在此刻似乎也合情合理，因爲我能夠獲取複選框fetched.This的價值值代表一些id。假設我選中的複選框的值爲1，那麼該複選框下的所有輸入文本字段都有名稱，如title1，headline1，dw1 ...等....所以，如何編碼onchange事件，以便我可以添加'required'屬性僅附加到這些複選框的字段。對不起，JavaScript和jQuey neww ...不擅長編碼在這種語言:( –

@ Sunny-看到我的編輯 –

非常感謝sJhonny ....只是糾正我，如果我錯了。我有一個已知的文本$（「＃txtName」+ $（「＃checkBox」）.val（））。我可以修改上面的代碼，像這樣。 addClass（'required'）?? –

驗證基於複選框值的文本字段 - jQuery驗證

回答

相關問題