2014-03-13 27 views
0

我想验证一个TextBox作为必填字段,如果用户检查任何复选框。如何在mvc4中为以下代码编写javascript或jquery验证?

如何验证上述要求。是否有人可以帮忙?

以下是查看源代码片段。

<div> 
     <div id=""> 
      <input type="checkbox" id="partsChk" name="partsChk"/><label  
      class="enrollment_side"> 
       Parts (including IRFs) 
      </label> 
     </div> 


      <div id=""> 
      @Html.TextBox("PartsTitle","", new { @class = "enrollment_tbox", placeholder 
       = "Parts Contact Title (i.e. Parts Manager)" }) 


      <br /> 
      @Html.TextBox("PartsFirstName", "", new { placeholder = "First Name" }) 
      @Html.TextBox("PartsLastName","", new { placeholder = "Last Name" }) 
      @Html.TextBox("PartsEmpId","", new { placeholder = "BMW Employee ID" }) 


      <br /> 

      </div> 

      </div> 


      <div> 
     <div id=""> 
      <input type="checkbox" id="salesChk" name="salesChk" /><label 
     class="enrollment_sidehdr">Sales – Coming in Q3 2014 
      </label> 
     </div> 


      <div id=""> 
     @Html.TextBox("SalesTitle","", new { @class = "enrollment_tbox", placeholder = 
     "Sales Contact Title (i.e. Sales Manager)" }) 

      <br /> 

      @Html.TextBox("SalesFirstName", "", new { placeholder = "First Name" }) 
      @Html.TextBox("SalesLastName","", new { placeholder = "Last Name" }) 
      @Html.TextBox("SalesEmpId","", new { placeholder = "BMW Employee ID" }) 

     </div> 

     </div> 


    <div> 
     <div id=""> 
     <input type="checkbox" id="serviceChk" name="serviceChk" /><label 
     class="enrollment_sidehdr">Service – Coming in Q3 2014 
      </label> 
     </div> 


     <div id=""> 
      @Html.TextBox("ServiceTitle","", new { @class = "enrollment_tbox", 
     placeholder = "Service Contact Title (i.e. Service Manager)" }) 
      <br /> 

      @Html.TextBox("ServiceFirstName", "", new { placeholder = "First Name" }) 
      @Html.TextBox("ServiceLastName","", new { placeholder = "Last Name" }) 
      @Html.TextBox("ServiceEmpId","", new { placeholder = "BMW Employee ID" }) 


      <br /> 

     </div> 

     </div> 
+0

后所以你有多个复选框与每个文本字段相关? –

+0

是的,我有多个文本框与textboxes.ie组相关,对于每个组我有一个复选框 – user3301440

回答

2

请参阅此示例代码。我已经写了HTML和jQuery代码,在你的应用程序中集成它

HTML

Group 1 
<input type="checkbox" id="1" class="cb"/> 
<input type="text" class="txt1"> 
<input type="text" class="txt1"> 
    <br/> 
    <br/> 
Group 2 
<input type="checkbox" id="2" class="cb"/> 
<input type="text" class="txt2"> 
<input type="text" class="txt2"> 
    <br/> 
    <br/> 
Group 3 
<input type="checkbox" id="3" class="cb"/> 
<input type="text" class="txt3"> 
<input type="text" class="txt3"> 
    <br/><br/> 
    <input type="button" id="button1" value="click me" /> 

jQuery的

$("#button1").click(function(){ 
    $(".cb").each(function(){ 
     var flag = 0; 
     if($(this).is(':checked')) 
     { 
      $(".txt" + $(this).attr("id")).each(function(){ 
       if($(this).val() == "") 
       { 
        flag = 1; 
       } 
      }); 
      if(flag == 1) 
      { 
       alert("Fields of Group " + $(this).attr("id") + " are empty, Please fill it"); 
      } 
     } 
    }); 
}); 

Live demo here

1

如果你的命名约定是山姆e您可以使用以下代码...

将您的复选框的ID分别更改为PartsChk,SalesChk和ServiceChk。然后写下面的脚本

$('input[type=checkbox]').each(function(){ 
     if($(this).is(':checked')){ 
      var prefix=$(this).id.replace('Chk',''); 
      if($('#'+prefix+'Title').val()==''){ 
        alert(prefix+'Title Field can not be left Empty'); 
        $('#'+prefix+'Title').focus(); 
       } 
       else if($('#'+prefix+'FirstName').val()==''){ 
        alert(prefix+'FirstName Field can not be left Empty'); 
        $('#'+prefix+'FirstName').focus(); 
       } 
       else if($('#'+prefix+'LastName').val()==''){ 
        alert(prefix+'LastName Field can not be left Empty'); 
        $('#'+prefix+'LastName').focus(); 
       } 
       else if($('#'+prefix+'EmpId').val()==''){ 
        alert(prefix+'EmpId Field can not be left Empty'); 
        $('#'+prefix+'EmpId').focus(); 
       } 
     } 
} 

这个jQuery代码会给正是你想要,它会给警报如果字段为空,如果corressponding复选框被选中,并且重点空白元素..

相关问题