如何在 mvc4 中为以下代码编写 javascript 或 jquery 验证？

Posted 2023-05-09

【中文标题】如何在 mvc4 中为以下代码编写 javascript 或 jquery 验证？

【英文标题】：how to write javascript or jquery validation for below code in mvc4?

【发布时间】：2014-04-17 18:30:35

【问题描述】：

如果用户选中任何复选框，我想验证 TextBox 作为必填字段。

我如何验证上述要求。有人可以帮忙吗？

下面是查看代码sn-p。

<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>

【问题讨论】：

所以你有多个与每个文本字段相关的复选框？

是的，我有多个与文本框组相关的文本框。即，对于每个组，我都有一个复选框

【参考方案1】：

请参考此示例代码。我已经编写了 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

【参考方案2】：

如果您的命名约定与您编写的相同，您可以使用以下代码...

将复选框的 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 代码会给出你想要的，如果相应的复选框被选中并且在焦点到空白元素之后，如果字段留空，它会发出警报..